gulp 归档 – 昨日当年

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