美文网首页
gulp构建

gulp构建

作者: GarenWang | 来源:发表于2017-01-01 01:10 被阅读0次

问答

1.nodejs 是什么?可以做什么?为什么擅长做?

  • Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。
  • Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
  • 特性
    1.单线程
    2.非阻塞IO
    3.事件驱动
    4.RESTful API
    5.V8虚拟机
  • 应用:
    1.Web开发:Express + EJS + Mongoose/MySQL
    2.REST开发:Restify
    3.Web聊天室(IM):Express + Socket.io
    4.Web爬虫:Cheerio/Request
    5.Web博客:Hexo
    6.Web论坛: nodeclub
    7.Web幻灯片:Cleaver
    8.前端包管理平台: bower.js
    9.操作系统: node-os
    10.客户端应用工具: node-webwit
  • nodejs的几大特性奠定了node.js开发上述应用的优势
    1.动态语言:开发效率非常高,并有能力构建复杂系统,如ql.io。
    2.性能和I/O负载:Nodejs非常好的解决了IO密集的问题,通过异步IO来实现。
    3.连接的内存开销:每个Node.js进程可以支持超过12万活跃的连接,每个连接消耗大约2K的内存。
    4.操作性:实现了Nodejs对于内存堆栈的监控系统。

2.npm 是什么? 如何安装 node 应用?全局安装和本地安装有什么区别? --save与--saveDev的区别? node_module的查找依赖的路线是怎样的?

  • npm(node package manager)是NodeJS的包管理器,能够让用户上传或下载第三方库或应用,用于node插件管理(包括安装、卸载、管理依赖等)。
  • 全局安装可以计算机的任意目录下调用nodejs.本地安装只能在安装相应的目录下运行nodejs.
    1.全局安装命令npm install gulp -g 或 npm install gulp --global
    2.本地安装命令npm install gulp 或 npm install gulp --save-dev
  • npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,npm install --save 或 npm install --save-dev,区别如下:
    1.--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则把依赖包名称添加到 package.json 文件 devDependencies 键下
    2.dependencies键下的模块一般是生产环境下使用 ,devDependencies 键的模块一般是开发环境下使用
  • nodemoudle的查找路径是从当前的项目目录一直向上查找到系统的nodemoule根目录,这也解释了全局安装为什么生效

3.安装browser-sync并了解它的使用方式

  • Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是** Browsersync可以同时在PC、平板、手机等设备下进项调试**。
  • 安装方式(命令行)
    1.npm install browser-sync -g
    2.查看版本browser-sync --version,若有版本号则表示安装成功
    3.启动 BrowserSync
    3.1 如果您只希望在对某个css文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:browser-sync start --server --files "css/*.css"
    3.2 如果您需要监听多个类型的文件,您只需要用逗号隔开例如我们再加入一个.html文件.browser-sync start --server --files "css/*.css, *.html"
    3.3 如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站.browser-sync start --proxy "主机名" "css/*.css"
  • 建议结合gulp或grunt来使用,效果更加

4.全局安装server-mock并了解它的使用方式

  • server-mock 是一个简单好用的用于前后端分离的 mock 利器, 基于 express 开发,可方便的 mock 数据,和一般基于配置的 mock 工具不同,server-mock可以创建使用范例,让使用者可让使用者模仿范例简单快捷的实现需求
  • 安装方式(npm命令)
    1.全局安装npm install server-mock -g
    2.安装完毕,命令行打开项目的文件,输入mock init
    3.server-mock还支持页面路由解析与模板渲染,在router.js里设置好对应路由下需要展示的数据以及对应的模板文件,即可通过浏览器看到渲染后的效果
    4.启动 webserver:mock start,在浏览器输入 http://localhost:8080 即可预览
  • 参考文档:server-mock

5.什么是前端构建,有哪些常见的前端构建工具?

  • 前端构建就是实现前端性能优化自动化、工程化的过程,前端构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的,比如我们会用 Less /Sass去写 CSS,会用 Jade 去写 HTML,会用 Browserify 去模块化、为非覆盖式部署的资源加 MD5 戳等,工作性质重复机械,浪费大量人力物力,前端工具就是为了解决这个问题,
  • 常见的前端构建工具有gulp,grunt,Yeoman, WebPack等

代码

1.使用 gulp,实现一个项目的自动化构建, 要求:

  • 项目中包括多个 css 文件, 多个 js 文件,多个图片

  • 操作 src 目录,css 需要压缩合并,js 需要压缩合并,图片需要压缩,处理后放入 dist 目录

  • 以下是范例,推荐构建前面的任务中包含 css js和图片的项目

  • task41预览

  • task41代码

相关文章

  • 相关文章记录

    1.gulp构建工具相关信息 前端自动化构建工具gulp记录Gulp.js-livereload 不用F5了,实时...

  • gulp的简单使用

    gulp构建项目 1.安装gulp,创建gulpfile.js作为入口文件 2.确定需要构建的文件,列出构建任务和...

  • gulp

    gulp解释 GULP 是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器。GULP 是 基 于 Nod...

  • 『前端工程化』gulp(gulp3 && gul

    Gulp 什么是Gulp Gulp是基于Node.js的构建工具,我们使用它来集成前端开发环境,来构建自动化工作流...

  • 使用gulp构建TypeScript项目

    使用Gulp构建TypeScript,在Gulp管道里添加Browserify, uglify或Watchify。...

  • 初认gulp

    为什么是Gulp? 类似Gulp的工具,我们通常称之为构建工具。如今最流行的两个构建工具是Gulp和Grunt。已...

  • Gulp笔记

    Gulp.js Gulp.js 是一个构建工具,与Grunt相比,Gulp更加简洁,执行效率更高。 安装Gulp ...

  • gulp资源整理

    Gulp官网 Gulp中文网 Gulp插件网 博客: 前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...

  • 1,node.js

    自动化构建工具 gulp webpack grunt gulp--构建项目,压缩合并处理,依赖于 gulpf...

  • Gulp常用api简介

    gulp gulp是一个nodejs的streaming构建工具,所谓的streaming大致意思就是把构建流程想...

网友评论

      本文标题:gulp构建

      本文链接:https://www.haomeiwen.com/subject/rukbvttx.html