• Gulp是一款非常简洁的前端自动化构建工具,依赖于Nodejs,使用Gulp非常简单。

    安装

    首先你需要安装有Nodejs,然后使用npm安装gulp(建议使用cnpm

    $ npm install gulp -g
    

    如何使用

    首先建立一个文件夹作为node项目文件夹,然后将gulp安装到项目内。

    $ mkdir gulp-demo
    $ cd gulp-demo
    $ npm init
    $ npm install gulp --save-dev
    

    Gulp的配置文件只有一个,名为gulpfile.js在项目的根目录下,需要我们手动创建这个文件

    然后编辑这个文件

    var gulp = require('gulp'); //引入gulp赋给gulp变量
    gulp.task('default', function() {
      // 默认任务(task),自动执行
      console.log("Hello Gulp");
    });
    

    然后运行Gulp

    $ gulp
    

    这个命令默认会执行默认任务(default),如果想要单独运行自己定义的任务,就使用gulp [任务名],同理,想要创建一个自定义的任务:

    gulp.task('customTaskName', function() {
      // 这是一个自定义任务。
    })
    

    自定义的任务也可以放到default里来随默认任务运行:

    gulp.task('default', function() {
      gulp.run('customTaskName');
    });
    

    使用插件

    Gulp的强大是依赖于它各种各样的插件的。例如gulp-sassgulp-jslintgulp-uglify等,这些都可以使用npm安装的。同样的,像下面这样引入这些插件

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

    gulp-sass,一个把sass(scss)文件编译为css文件的插件为例,像下面这样使用这个插件

    gulp.task('sass', function() {
        gulp.src('src/scss/index.scss')
            .pipe(sass())
            .pipe(gulp.dest('dist/css'));
    });
    

    执行sass任务时会变异/src/scss/index.scss文件,然后输出index.css到/dist/css目录下。

    监听文件

    既然是自动化工具,那肯定是运行了就不用管的,在开发环境中,如何在修改了文件后自动执行任务,这就要使用到watch方法:

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

    以上面的sass任务为例,监听index.scss文件,当文件修改时,重新编译一次css文件,创建一个watch任务

    gulp.task('watch', function() {
        gulp.watch('src/scss/index.scss',['sass']);
    })
    

    然后运行watch任务:

    $ gulp watch
    

    这样当index.scss文件被修改时,就会运行scss任务了。

    完结

    Gulp的强大之处在于各种插件,掌握了基本使用方法后就可以去看各种插件的使用方法了