gulp前端自动化构建工具入门篇

如今咱们经过这3个问题来学习一下；

一、什么是gulp?

二、为何要用gulp?

三、怎么用？

 

什么是gulp

答：是一个前端自动化的构建工具，直白点说，若是没有这个工具，咱们利用人工依旧能够作到如下优势，可是在项目逐渐庞大的时候，采用这个工具，能够提高性能和效率。

 

为何要用gulp?

答：

一、js和css属于静态文件，不少时候浏览器存在缓存机制，为了不缓存带来的误会，能够利用构建工具，给每个静态文件添加一个版本号，这样浏览器就会认为是新的文件，就不存在缓存机制。

二、性能优化：文件合并，减小http请求；文件压缩，减小文件体积，加快下载速度；

三、效率提高：自动添加 CSS3的 vendor前缀；代码分析检查改正；在使用 MVC和MVVM的框架后，可在提交以前，使用gulp自动跑一遍 单元测试；

 

怎么用？

一、首先，安装gulp以前，先安装 nodejs环境，由于gulp是基于 nodejs的前端构建工具

$ npm  install --global gulp

二、而后，在开发项目上，安装项目依赖（devDependencies）

$ npm  install --save-dev gulp

三、继续，在项目的根目录下建立一个名为：gulpfile.js的文件，用来配置gulp的相关task:

$ touch gulpfile.js

－－请打开gulpfile.js，输入如下内容：

var gulp = require('gulp');

这行命令告知node，先局部（node_modules）查找gulp包，找不到再去全局查找。找到以后就会赋值给gulp变量，而后咱们就可使用它了。

－－如何配置gulp任务：

gulp.task('task-name',funcion{ //Stuff here });

这是gulp设置task的大概模版，'task－name'是你给任务起的名字，稍后在命令行执行gulp task－name，将任务执行。

写个hello world，是这样的

而后在命令行执行

$ gulp  hello

运行结果：

 

好的，已经成功运行出来了！大概任务就是这样子，如今咱们来写一个正式的gulp任务。

例如，编译sass，任务代码为：

 

 

如图：.src 是文件的源路径；.pipe是任务运行的管道；.dest是任务结束以后的输出路径。

同时sass文件内容为，下面那个分数没有被计算出来：

 

好的，代码写完了，在命令行执行命令 $ gulp sass，如图：

 

编译后，你在css输出的路径那里会看到生成了一个同名的.css文件，内容就是sass编译完的结果为：

 

gulp还有不少其它插件，例如：压缩，合并，加vendor前缀（css3对各个浏览器兼容的前缀）等等功能，都跟以上作法相似。

gulp的基本用法大概就是这样，他还有不少其它插件，能够方便开发，例如自动刷新，监听事件之类的等等，下面就是经常使用插件的连接：

No.一、run-sequence

Links:

做用：让gulp任务，能够相互独立，解除任务间的依赖，加强task复用

No.二、browser-sync

Links:

做用：静态文件服务器，同时也支持浏览器自动刷新

No.三、del

Links：https://www.npmjs.com/package/del

做用：删除文件/文件夹

No.四、gulp-coffee

Links:

做用：编译coffee代码为Js代码，使用coffeescript必备

No.五、coffee-script

Links:

做用：gulpfile默认采用js后缀，若是要使用gulpfile.coffee来编写，那么须要此模块

No.六、gulp-nodemon

Links:

做用：自动启动/重启你的node程序，开发node服务端程序必备

No.七、yargs

Links:

做用：用于获取启动参数，针对不一样参数，切换任务执行过程时须要

No.八、gulp-util

Links:

做用：gulp经常使用的工具库

No.九、gulp-uglify

Links:

做用：经过UglifyJS来压缩JS文件

No.九、gulp-concat

Links:

做用：合并JS

No.十、gulp-sourcemaps

Links:

做用：处理JS时，生成SourceMap

No.十一、gulp-less

Links：

做用：将less预处理为css

No.十二、gulp-sass

Links：

做用：将sass预处理为css

No.1三、gulp-autoprefixer

Links：

做用：使用Autoprefixer来补全浏览器兼容的css。

No.1四、gulp-minify-css

Links：

做用：压缩css。

No.1五、connect-history-api-fallback

Links：

 

来源：http://www.yidianzixun.com/n/0CUI9w1Z?s=8&appid=xiaomi