gulp使用心得

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目；

一、gulp安装
gulp是基于NodeJS运行的，所以需要想安装NodeJS. http://nodejs.org/download/
安装gulp：

# 安装全局环境
npm install gulp -g
#安装本地环境
npm install gulp --save-dev

二、gulp插件安装

npm install （gulp插件，可以不选，这样就会安装package.json中的外挂插件）--save-dev

例如：

npm install gulp-minify-css --save-dev

经常使用的gulp插件如下：

autoprefixer = require('gulp-autoprefixer'),//添加CSS3前缀
    concat = require('gulp-concat'),//文件合拼
    uglify = require('gulp-uglify'),//js压缩
    cleancss = require('gulp-clean-css'),//css压缩
    replace = require('gulp-replace'),//文件文字替换
    rename = require('gulp-rename'),//文件中命名
    rev = require('gulp-rev'),//生产MD5，并可以输出对应json文件
    clean = require('gulp-clean'),//清除文件夹
    less = require('gulp-less'),//less编译
    gulpif = require('gulp-if'),//条件判断执行任务
    revCollector = require('gulp-rev-collector'),//根据json文件替换（配合rev插件用）
    imagemin = require('gulp-imagemin'),//图片压缩
    sourcemaps = require('gulp-sourcemaps'),//生产map对应关系目录
    fileinclude = require('gulp-file-include'),//文件嵌入
    jshint = require('gulp-jshint'),
    zip = require('gulp-zip');//生成zip包

三、配置开发路径，结构为：

四、创建gulpfile.js文件
下面是我写得demo中gulpfile.js代码：

// ------nodejs 依赖
var fs = require('fs');//读写文件模块

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'),
    concat = require('gulp-concat'),//合拼文件
    uglify = require('gulp-uglify'),//压缩JS
    autoprefixer = require('gulp-autoprefixer'),//css-3补充前缀
    sourcemaps = require('gulp-sourcemaps'),//生产map关系文件
    clean = require('gulp-clean'),//清除文件
    replace = require('gulp-replace'),//代码替换
    less = require('gulp-less'),//编译LESS
    jshint = require('gulp-jshint'), //JS代码规范检验
    htmlmin  = require('gulp-htmlmin'),//html压缩
    cleanCSS = require('gulp-clean-css'),//CSS压缩
    rev = require('gulp-rev'),//生产MD5，并可以输出对应json文件
    revCollector = require('gulp-rev-collector'),//根据json文件替换（配合rev插件用）
    zip = require('gulp-zip'),//生成zip
    rename = require('gulp-rename');   // 文件重命名
    gulpif = require('gulp-if'),//文件判断执行任务
    fileinclude = require('gulp-file-include'),
    gcallback = require('gulp-callback'); //回调执行;//文件嵌入


function dealJs(opt){
    var array_src = opt.array_src || ['src/js/**'];
    var stream = gulp.src(array_src)
            //.pipe(fileinclude())
            .pipe(gulpif(opt.type == 'dist', uglify()))
            .pipe(gulp.dest(opt.dest));
    return stream;
}

function dealCss(opt){
    var array_src = opt.array_src || ['src/less/**'];
    var stream = gulp.src(array_src)
            //.pipe(fileinclude())
            .pipe(less())
            .pipe(autoprefixer())
            .pipe(gulpif(opt.type == 'dist',cleanCSS()))
            .pipe(gulp.dest(opt.dest));
    return stream;
}

function dealHtml(opt){
    var array_src = opt.array_src || ['src/html/**'];
    if(opt.rev){
        array_src.push(opt.rev);
    }
    var stream = gulp.src(array_src)
        //.pipe(fileinclude())
        .pipe(gulpif(opt.type != 'dev',replace(/<!-- dev start -->[\s\S]*<!-- dev end -->/g,''))) //清除非开发环境的测试代码
        .pipe(gulpif(opt.type != 'test',replace(/<!-- test start -->[\s\S]*<!-- test end -->/g,''))) //清除非测试环境的测试代码
        .pipe(gulpif(opt.rev != undefined, revCollector({replaceReved: true})))//替换MD5文件名路径
        .pipe(gulp.dest(opt.dest));
    return stream; // 返回一个 stream 来表示它已经被完成
}

// =======================本地开发预览版本（无压缩）===============================
gulp.task('dev-js',function(){
    dealJs({
        type:'dev',
        dest:'dev/js'
    })
});
gulp.task('dev-css',function(){
    dealCss({
        type:'dev',
        dest:'dev/css'
    })
});
gulp.task('dev-html',function(){
    dealHtml({
        type:'dev',
        dest:'dev/html'
    })
});

// ======================= 本地路径测试预览版本（无压缩）===============================
gulp.task('test-js',function(){
    dealJs({
        type:'test',
        dest:'test/js'
    })
});
gulp.task('test-css',function(){
    dealCss({
        type:'test',
        dest:'test/css'
    })
});
gulp.task('test-html',function(){
    dealHtml({
        type:'test',
        dest:'test/html'
    })
});

// ======================= web-发布版本 ===============================

var release_path = 'resources';

gulp.task('build-js',function(){
    return  dealJs({
        type:'dist',
        dest:'build/js'
    })
});
gulp.task('build-css',function(){
    return  dealCss({
        type:'dist',
        dest:'build/css'
    })
});

// 生产到build文件，为输出MD5文件，并生成对应关系的json文件做为临时目录
gulp.task('build',['build-js','build-css'],function(){
    // 输出MD5文件，并生成对应关系的json文件
    var stream = gulp.src(['build/**'])
            .pipe(rev())  //set hash key
            .pipe(gulp.dest(release_path))  // write rev'd assets to build dir
            .pipe(rev.manifest())       //set hash key json
            .pipe(gulp.dest('rev')); // write manifest to build dir
    return stream;
})


// ======================= 清除临时目录 ===============================
gulp.task('clean',function(){
  var stream = gulp.src(['build','rev','resources'])
            .pipe(clean());
  return stream;
});

// ======================= 执行任务 ===============================
gulp.task('dev',['dev-js','dev-css','dev-html']); //开发环境
gulp.task('test',['test-js','test-css','test-html']); //测试环境
gulp.task('dist',['build'],function(){
    // 替换MD5文件路径
    dealHtml({
        type: 'dist',
        rev: 'rev/*.json',
        dest: release_path + '/html'
    });
    // 删除临时文件
    setTimeout(function(){
        gulp.src(['zip','rev','build'])
         .pipe(clean());
    },1000);

    console.log('---------------线上web页面输出到resources完成---------------'); 
}); // 开发环境

// 开发（测试）环境 执行命令 gulp dev(test)
// 正式环境 依次执行 clean - build -  dist

下面是执行后的结果：

注：利用gulp在静态资源文件中添加md5串，解决了浏览器缓存，同时实现了前端静态化。