浅谈前端构建工具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']);