gulp前端自动化构建

gulp?

gulp是一个基于Node.js流(stream)的构建工具,可以快速构建项目并减少频繁的IO操作。

关于流的理解,我们可以把文件比作装水的桶,而水就是文件里的内容,我们用一根管子(pipe)连接两个桶使得水从一个桶流入另一个桶,如图:

gulp? Grunt?

  1. 配置简单,易于学习
  2. 构建快速,基于Node.js流,不需要往磁盘写中间文件,可以更快地完成构建。

gulp 执行JS压缩

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('jsMin', function(){
    return gulp.src('js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('js'));
});

Grunt 执行JS压缩

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            main: {
                files: [{
                    expand: true,
                    cwd: 'js',
                    src: '*.js',
                    dest: 'assets/js'
                }]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('jsMin', ['uglify']);
}

gulp使用

全局安装 gulp

$ npm install -g gulp

安装项目依赖

gulp同时需要作为项目开发依赖安装:

$ npm install --save-dev gulp

其他依赖根据需要安装,安装方式同上。

注意:如果未部署过项目可能会报错,需要先执行以下指令创建package.json文件:

$ npm init

创建gulpfile.js文件

在项目根目录下创建一个名为 gulpfile.js 的文件,例如:

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行gulp

$ gulp

默认的名为default的任务(task)将会被运行,想要单独执行特定的任务,请输入gulp <task>

API - 简单得不像实力派

  • gulp.src
  • gulp.dest
  • gulp.watch - (只监听变化,新增文件无法监听,推荐使用gulp-watch插件替代)
  • gulp.task

详情访问:http://www.gulpjs.com.cn/docs/api/

总结

Gulp相比于Grunt有很多优点,比较直观的就是学习曲线平滑。比Grunt速度更快、配置更少。