前端工程的构建工具gulp

亦凉 2022-07-17 00:28 252阅读 0赞

现在前端构建工具主要有grunt、gulp，这里主要讲解gulp，之所选择gulp，是因为gulp有以下极大优点

1、易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。

2、高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。

3、高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。

4、易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。

gulp的API一共只有5个，分别是：

1、gulp.task定义一个任务

2、gulp.src输出符合匹配模式的文件

3、gulp.dest输出到一个文件，也可以定义为新的文件，它会自动创建

4、gulp.watch监视文件，当文件发生变化时，可执行相应的事件

5、gulp.run尽可能多的并行执行多个task

更详细的用法可参照http://www.gulpjs.com.cn/docs/api/

gulp.task 在orchestrator中，解决上述任务依赖的方式有三种：

在任务定义的function中返回一个数据流，当该数据流的end事件触发时，任务结束。

在任务定义的function中返回一个promise对象，当该promise对象resolve时，任务结束。

在任务定义的function中传入callback变量，当callback()执行时，任务结束。

Gulp脚本中可以使用这三种方法来实现任务依赖，不过由于Gulp中的任务大多是数据流操作，因此以第一种方法为主。

gulp与grunt的不同之处在于：

流：Gulp是一个基于流的构建系统，使用代码优于配置的策略。

插件：Gulp的插件更纯粹，单一的功能，并坚持一个插件只做一件事。

代码优于配置：维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。  
没有产生中间文件

下面这是js和css的压缩与监视，当其监视的文件的内容发生变化时，js和css的压缩文件也会相应的发生改变，并且将css自动添加前缀即autoprefix也集合到其中。

var gulp = require('gulp');
    
    var uglify = require('gulp-uglify'),
        rename = require('gulp-rename'),
        minifycss = require('gulp-minify-css'),
        concat = require('gulp-concat'), 
        autoprefixer = require('gulp-autoprefixer');

gulp.task('uglify', function() {
        gulp.src(['./src/js/*.js','!./src/js/*.min.js'])
            // 合并所有的js
            .pipe(concat('all.js'))
            // 对js进行压缩
            .pipe(uglify())
            // 压缩之后重命名
            .pipe(rename({suffix:'.min'}))
            // 生成压缩之后的文件
            .pipe(gulp.dest('./src/jsall'));
    });
    
    
    gulp.task('minifycss', function() {
        gulp.src(['./src/css/*.css','!./src/css/*.min.css'])
            // 合并所有的css
            .pipe(concat('all.css'))
            // 对css里面需要加前缀的进行添加前缀
            .pipe(autoprefixer())
            // 对css文件进行压缩
            .pipe(minifycss())
            // 压缩之后重命名
            .pipe(rename({ suffix: '.min' }))
            // 生成压缩之后的文件
            .pipe(gulp.dest('./src/cssall'));
    });
    // 当观察的js发生变化时，自动进行修改压缩
    var watcherjs = gulp.watch('./src/js/*.js', ['uglify']);
    watcherjs.on('change', function(event) {
        // 在操作窗口输出当前的状态
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
    // 当观察的css发生变化时，自动进行修改压缩
    var watchercss = gulp.watch('./src/css/*.css', ['minifycss']);
    watchercss.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });

关于gulp的结构化可以参考

http://geek.csdn.net/news/detail/96857?ref=myread