整理gulp自动化构建工具

教程地址：http://www.dtao.org/archives/18     http://segmentfault.com/a/1190000000372547     http://www.w2bc.com/Article/12941

1、安装nodejs

2、新建package.json文件

3、全局和本地安装gulp

4、使用npm安装gulp插件(如：gulp-jshint、gulp-sass、gulp-mini-css、gulp-uglify等)

5、新建gulpfile.js文件

6、通过命令提示符运行gulp任务

说明：

package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。它是一个普通json文件，所以不能添加任何注释。安装gulp插件的时候如果提示npm warn package.json这样的问题，请在package.json文件里添加"private": true，即将应用程序标记为私有。

gulpfile.js文件参考：

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

// 引入组件
var jshint = require(‘gulp-jshint‘);
var sass = require(‘gulp-sass‘);
var concat = require(‘gulp-concat‘);
var mincss = require(‘gulp-mini-css‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);

//nodeJS中管道式方法的api一般为.pipe()方法，管道化执行组件任务，它很类似jQuery中的链式写法

//定义一个sass任务（自定义任务名称）
// 编译Sass
gulp.task(‘sass‘, function() {
    gulp.src(‘./scss/*.scss‘) //该任务针对的文件，*代表所有文件
        .pipe(sass()) //该任务调用的模块
        .pipe(gulp.dest(‘./css‘)); //将会在css目录下生成.css文件
});

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

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

//每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口
// 定义默认任务
gulp.task(‘default‘, function(){
    gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);// 表示运行对应的任务

    // 监听文件变化，若有改动则执行以下三个任务
    gulp.watch(‘./js/*.js‘, function(){
        gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);
    });
});