浅谈前端构建工具gulp

1、gulp

gulp是一个前端自动化的构建工具，采用这个工具，可以提升性能和效率。

 

2、为什么要用gulp

1) .js和.css属于静态文件，由于浏览器存在缓存机制，为了避免缓存带来的问题，可以利用构建工具，给每一个静态文件添加一个版本号以区别文件。

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

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

 
3、gulp的使用
1) 安装gulp之前，先安装node.js环境，因为gulp是基于node.js的前端构建工具：
在命令行执行：npm install --global gulp
2) 在开发项目上，安装项目依赖：
在命令行执行：npm install --save-dev gulp
3) 在项目根目录下创建一个文件，用来配置gulp的相关task，文件内容示例如下：

var gulp = require('gulp'); // 告知node先局部（node_modules）查找gulp包，找不到再去全局查找，找到后赋值给gulp变量，就可以使用了。
gulp.task('helloWorld', funcion() { // 配置gulp任务，指定任务名为helloWorld
console.log('Hello world');
});

4) 执行任务
在命令行执行：gulp helloWorld
 
4、gulp常用插件：
run-sequence：让gulp任务，可以相互独立，解除任务间的依赖，增强task复用
browser-sync：静态文件服务器，同时也支持浏览器自动刷新
del：删除文件/文件夹
gulp-coffee：编译coffee代码为Js代码，使用coffeescript必备
coffee-script：gulpfile默认采用js后缀，如果要使用gulpfile.coffee来编写，那么需要此模块
gulp-nodemon：自动启动/重启你的node程序，开发node服务端程序必备
yargs：用于获取启动参数，针对不同参数，切换任务执行过程时需要
gulp-util：gulp常用的工具库
gulp-uglify：通过UglifyJS来压缩JS文件
gulp-concat：合并JS
gulp-sourcemaps：处理JS时，生成SourceMap
gulp-less：将less预处理为css
gulp-sass：将sass预处理为css
gulp-autoprefixer：使用Autoprefixer来补全浏览器兼容的css。
gulp-minify-css：压缩css。
connect-history-api-fallback：开发angular应用必须，用于支持HTML5 history API.

5、gulp的几个方法：
1) .src()：文件的源路径；
①　*.sass：匹配当前目录下的所有sass文件；
②　**/*.sass：匹配当前目录及其子目录下的所有.sass文件；
③　!test.scss：匹配当前目录下除test.sass外的文件；
④　*.+(scss|sass)：匹配当前目录下的.scss和.sass文件。
2) .pipe()：是任务运行的管道；
3) .dest()：是任务结束后的输出路径；
 
5、gulp简单示例：将sass预处理（编译）为css

var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', funcion() { // 配置gulp任务，指定任务名为sass
return gulp.src('css/*.sass')
.pipe(sass())
.pipe(gulp.dest('css'));
});

源路径‘css’里面的.sass文件：

div {
width: percentage(3/8);
}

在命令行执行：gulp sass，输出路径‘css’里面生成同名的.css文件：

div {
width: percentage(0.375);
}

 
6、gulp常用插件示例：
1) 语法检查：一般和监听文件变化配合使用，当文件修改时检查是否有语法错误，若有语法错误则在命令行中输出错误信息。
2) 文件合并：把所有.js文件合并成一个.js文件，把所有.css文件合并成一个.css文件。
3) 文件压缩：压缩文件，也可以是合并后的文件。
4) 监听文件变化：监听文件是否修改，若修改的话就执行特定操作，比如语法检查、文件合并、文件压缩等。

var gulp = require('gulp');
var jshint = require('gulp-jshint'); // 语法检查
var concat = require('gulp-concat'); // 文件合并
var uglify = require('gulp-uglify'); // 文件压缩
var rename = require('gulp-rename'); // 重命名
// 语法检查
gulp.task('jshint', function() {
return gulp.src('js/*.js').pipe(jshint()).pipe(jshint.reporter('default'));
});
// 文件合并与压缩
gulp.task('minify', function() {
return gulp.src('js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('js/dist'))
.pipe(uglify())
.pipe(rename({extname: '.min.js'})) // 也可以写成.pipe(rename('all.min.js');
.pipe(gulp.dest('js/dist'));
});
// 监听文件变化
gulp.task('watch', function () {
gulp.watch('js/*.js', ['jshint', 'minify']);
});
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);