gulp实战

分类：未分类日期：2015-05-21

gulp 实战

gulp 入门后，现在来实战一番，我们将使用 gulp 和 gulp 的 js 语法检查插件 gulp-jshint 来对我们的 js 文件进行检查。

gulp 基于 node.js，我们假设你已经安装了 node.js。

1、建立目录

在命令行工具输入 mkdir learn-gulp 建立 gulp 目录：

$ mkdir learn-gulp

2、建立 package.json 文件

在命令行工具输入 npm init 建立 package.json 文件。输入 npm init 后会要求你填写项目的名称、描述、关键字等等，如果不想填写，直接回车即可。

3、安装 gulp

输入 $ npm install gulp --save-dev 安装 gulp。

4、安装 gulp-jshint 插件

输入 $ npm install gulp-jshint --save-dev

5、建立 `gulpfile.js` 文件

输入 $ vi gulpfile.js 建立 gulpfile.js 文件，再直接输入 :wq 保存并退出。

6、编写代码

在编辑器中打开 gulpfile.js 文件，并输入以下代码：

// 引入 gulp
var gulp = require('gulp');

// 引入插件
var jshint = require('gulp-jshint');

// 建立任务
gulp.task('jshint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 默认任务
gulp.task('default', ['jshint']);

我们使用 gulp.task 建立了一个名叫 jshint 的任务，并写入了一些代码。执行该任务就会检查 js/ 目录下的 js 文件是否有报错或警告。

另外，我们还建立了一个名叫 defaule 的任务，这是 gulp 的默认任务，我们把它指向了 jshint 任务，也就是说 gulp 默认执行的就是 jshint 任务。