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的强大之处在于各种插件,掌握了基本使用方法后就可以去看各种插件的使用方法了