前端自动化构建工具--Gulp

时间： 作者：梧桐

什么是Gulp

Gulp是前端开发过程中对代码进行构建的工具,
自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

Gulp用法

1.1 安装node.js
Node.js
1.2 全局安装Gulp
npm install gulp -g
1.3 新建package.json文件，项目安装Gulp
npm init.2全局安装
npm install gulp --save-dev
1.4 安装Gulp插件
npm install gulp-uglify --save-dev
1.5 新建gulpfile.js文件
1.6 编写gulpfile.js内容

Gulp的API

Gulp中文网

1.1 gulp.src(globs[, options])

src方法是指定需要处理的源文件的路径;
globs同watch方法；
options(可选)：类型为Object，有3个属性buffer、read、base；
options.buffer(Boolean)：默认：true,设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
options.read(Boolean)：默认：true 设置false，将不执行读取文件操作，返回null；
options.base(String)：设置输出路径以某个路径的某个组成部分为基础向后拼接

1.2 gulp.dest

dest方法是指定处理完后文件输出的路径
path(必填)：类型为String or Function 指定文件输出路径，
或者定义函数返回文件输出路径亦可；

1.3 gulp.task(name[, deps], fn)

task定义一个gulp任务。
name(必填)：类型为String， 指定任务的名称；
deps(可选)：类型为StringArray，该任务依赖的任务；
fn(必填)：类型为Function，该任务调用的插件操作。

1.4 gulp.watch(glob [, opts], tasks)

watch用于监听文件变化，文件一修改就会执行指定的任务。
glob(必填):需要处理的源文件匹配符路径,类型为String或StringArray；
opts(可选):类型为Object，
tasks(必填)：类型为StringArray，需要执行的任务的名称数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
var gulp = require('gulp'),
        cssmin = require('gulp-minify-css'),
        clean = require('gulp-clean'),
        rename = require('gulp-rename'),
        rev = require('gulp-rev'),
        collector = require('gulp-rev-collector'),
        uglify = require('gulp-uglify');
    //清除
    gulp.task('clean', function() {
        return gulp.src('dist', {
            read: false
        }).pipe(clean());
    });
    //css压缩
    gulp.task('testCssmin', function() {
        gulp.src(['css/bootstrap.css','css/main.css', 'css/form.css', 'css/form.css','css/it-industry.css'])
            .pipe(cssmin())
            .pipe(rename(function (path){
                path.basename += '.min';
                path.extname ='.css';
            }))
            .pipe(rev())
            .pipe(gulp.dest('dist/css'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('dist/css'));
    });
    //js压缩
    gulp.task('testJsmin', function() {
        //递归遍历js文件夹下所有文件
        gulp.src('js/**/*.js')
            .pipe(uglify())
            // .pipe(rev())
            // .pipe(gulp.dest('dist/js'))
            // .pipe(rev.manifest())
            .pipe(gulp.dest('dist/js'));
    });
    //替换路径
    gulp.task('rev', function() {
        //- 读取 .json 文件以及需要进行css名替换的文件
        gulp.src(['dist/css/rev-manifest.json', '../WEB-INF/jsp/common/header.jsp'])
            //- 执行文件内css名的替换
            .pipe(collector({
                replaceReved: true
            }))
             //- 替换后的文件输出的目录
            .pipe(gulp.dest('../WEB-INF/jsp/common/'));
    });
    //监听
    gulp.task('auto', function () {
        // 监听文件修改，当文件被修改则执行 testJsmin 任务
        gulp.watch('js/*.js', ['testJsmin']);
        // 监听文件修改，当文件被修改则执行 testCssmin 任务
        gulp.watch('css/*.css', ['testCssmin']);
    });
    //在命令行直接输入 gulp 回车，
    gulp.task('default', ['clean','testCssmin', 'testJsmin', 'rev']);

Gulp VS Grunt

优点
1.1 Gulp比Gruntgulp.task更快，利用Node.js强大的流，通过管道连接，速度更快
1.2 Gulp遵循代码优于配置策略，维护Gulp更容易，无需写繁杂的配置
1.3 Gulp的每个插件只完成一个功能
1.4 Gulp的核心API只有5个，学习成本低
缺点
1.1 社区不如Grunt完善，插件不够丰富

工具
Gulp