前端构建工具Gulp入门指南(第二篇)

我们上一篇安装node环境和gulp工具，并简单介绍了gulp构建工具的使用；
这篇我们重点介绍gulp任务使用方法。

编译Lass，Autoprefix及缩小化

检查node环境是否完成安装成功，执行命令如下：

node -v	//输出node版本号

npm -v	//输出npm版本号

以上两个命令都可输出版本信息即表示node环境安装成功。

第二步：安装gulp

全局安装gulp，执行命令如下：

npm install --global gulp	//全局安装gulp工具

gulp -v	//检查gulp是否安装成功

第三步：新建项目并建立gulp环境依赖

执行命令如下：

mkdir testapp && cd mkdir testapp //testapp 表示项目名称

npm init //创建项目，如果权限不够加上sudo执行，按照提示一步步操作即可

npm install --save-dev gulp	//建立项目的gulp依赖

npm install gulp-less gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev //载入gulp所需插件

使用 —-save-dev 来更新package.json文件、 devDependencies 的值，表明项目依赖gulp。

常用的gulp插件如下：
编译Lass (gulp-lass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

第四步： 新建配置gulpfile.js文件，并运行gulp

在项目根目录新建一个gulpfile.js文件，文件代码如下：

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

// 引入组件
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译less
gulp.task('less', function() {
    gulp.src('./less/*.less')
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('lib.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('build_dev', function(){
    gulp.run('lint', 'less', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'less', 'scripts');
    });
});

然后运行gulp，执行命令为：

gulp build_dev

---

参考链接为：
gulp官方网址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424