gulp构建工具的安装

第一步：node.js安装

在gulp安装之前，本机需要node环境。访问http://nodejs.org，然后点击大大的绿色的install按钮，下载完成后直接运行程序。npm会随着安装包一起安装，稍后会用到它。

为了确保node.js和npm已安装，请在命令行中输入以下命令:

node -v

npm -v

这两个命令，用于显示node或npm的版本。确定这两个安装后，可进行下一步

第二步： gulp 安装

1. 安装全局的gulp

   npm install -g gulp 
   

   • 如果ios安装不上，请在命令请加sudo
   • npm install是安装包的意思
   • -g 全局安装

2. 安装项目的gulp
   进入项目的目录后，开始安装项目的gulp。

   npm install --save-dev gulp 
   

   使用--save-dev来更新package.json文件，更新devDependencies值，以表明项目需要依赖gulp

第三步 npm init 生成package.json文件

在安装的过程中如果报找不到package.json，用npm init命令在该项目的目录中生成package.json文件

第四步 安装gulp组件

先看一下，我们的项目目录：

我们任务是将src目录上的js文件和less文件生成的build目录下，以便使用。

要完成的任务有：

• js检查
• less 编译
• js,css文件压缩合并
• 清空build目录下的文件
• 图片压缩

npm install gulp-less gulp-minify-css gulp-jshint  gulp-uglify gulp-imagemin gulp-rename  gulp-concat  gulp-clean  --save-dev 

gulp-less less 编译
gulp-minify-css css压缩
gulp-jshint js检查
gulp-uglify js压缩
gulp-imagemin 图片压缩
gulp-rename 重命名
gulp-concat 文件合并
gulp-clean 清空文件夹

第五步 编写gulpfile.js

gulp通过gulpfile文件来完成相关任务，因此项目中必须包含gulpfile.js

gulp有五个方法：src、dest、task、run、watch
src和dest：指定源文件和处理后文件的路径
watch：用来监听文件的变化
task：指定任务
run：执行任务

// 引入 gulp及组件
var gulp    = require('gulp'),                 //基础库
    less = require('gulp-less'),               //less
    minifycss = require('gulp-minify-css'),    //css压缩
    jshint = require('gulp-jshint'),           //js检查
    uglify  = require('gulp-uglify'),          //js压缩
    imagemin = require('gulp-imagemin'),       //图片压缩
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean');             //清空文件夹

// 样式处理
gulp.task('css', function () {
    var cssSrc = './src/less/*.less',
        cssDst = './build/css';

    gulp.src(cssSrc)
        .pipe(less())
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function(){
    var imgSrc = './src/images/**/*',
        imgDst = './build/images';
    gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
})

// js处理
gulp.task('js', function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./build/js';

    gulp.src(jsSrc)
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest(jsDst));
});

// 清空图片、样式、js
gulp.task('clean', function() {
    gulp.src(['./build/css', './build/js', './build/images'], {read: false})
        .pipe(clean());
});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('css','images','js');
    // gulp.watch('./build/js/*.js', function(){
    //     gulp.run('css', 'images', 'js');
    // });
});

gulp安装过程中可能遇到的问题

如果安装过程中报这个错误 "Error: Cannot find module 'jshint/src/cli'"

原因是命令不对，用：
```
npm install --save-dev jshint gulp-jshint 
```
来代替
```
 npm install gulp-jshint --save-dev
```

结束语

有一些参考资源供进一步学习：

1. npm上得gulp组件
2. gulp的Github主页
3. 官方package.json文档

为了实现更多的功能，大家可以多去了解一下node模块及gulp另一些功能

1. 为gulp增加watch功能，会自动编译文件
2. 为gulp增加serve功能，启动gulp的服务器
3. html文件里引用一些html片段:gulp-file-include模块
4. browser-sync模块，浏览器自动刷新（有个bug，html文件超过48个就执行不了gulp-file-include)

等等