gulp自动化构建前端工程

@第一步：安装Node环境

可以在这里下载node进行安装 https://nodejs.org/en/download/

安装完成后在命令行输入node -v 可以看到版本号则安装成功

@第二部：推荐安装 cnpm

npm服务器在国外，网络影响大，甚至还会遇到需要翻墙才能下载插件的情况，因此推荐安装cnpm。
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm

安装命令: npm install cnpm -g --registry=https://registry.npm.taobao.org

执行cnpm -v 显示版本号即安装成功

@第三部：安装gulp

安装命令：cnpm install gulp -g

-g表示在全局环境安装，以便任何项目都能使用它

执行 gulp -v 显示版本号即安装成功

@第四部：创建一个项目目录，初始化配置文件

webapp就是我新建的目录。

命令行进入到目录F:\webapp

执行命令 cnpm init 来新建package.json 直接回车默认值即可

注：package.json是基于nodejs项目必不可少的配置文件.

@第五步：安装gulp依赖包到项目中

注：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能
进入你的项目文件路径中后，执行cnpm install gulp --save-dev

@第六步：安装插件

cnpm install gulp-load-plugins

cnpm install gulp-clean

cnpm install gulp-rev-collector

cnpm install jshint

cnpm install gulp-minify-html

项目结构

编辑gulpfile.js

var gulp = require('gulp'),
    minifyCss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    clean = require('gulp-clean')
    rev = require('gulp-rev'),
    concat = require('gulp-concat'),
   // revReplace = require('gulp-rev-replace'),
    //useref = require('gulp-useref'),
	minifyHtml = require('gulp-minify-html'),
    revCollector = require('gulp-rev-collector');


	
//gulp-clean 清楚目录
//gulp-minify-css 压缩CSS为一行
//gulp-rev 对文件名加MD5后缀 
//gulp-rev-collector 路径替换
//gulp-jshint 检查js语法
    
//清空文件夹，避免资源冗余
gulp.task('clean',function(){
    return gulp.src('dist',{read:false}).pipe(clean());
});


//css文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出来
gulp.task('css',function(){
    return gulp.src('app/styles/*.css')
	//.pipe(concat('wap.min.css'))
    .pipe(minifyCss())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/styles/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'))
});


//js文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出
gulp.task('js',function(){
    return gulp.src('app/scripts/*.js')
    //.pipe( concat('wap.min.js') )
    .pipe(jshint())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/scripts/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'))
});


//js文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出
gulp.task('img',function(){
    return gulp.src('app/image/*.+(jpg|png|gif)')
    .pipe(rev())
    .pipe(gulp.dest('dist/app/image/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/img'))
});


//通过hash来精确定位到html模板中需要更改的部分,然后将修改成功的文件生成到指定目录
gulp.task('rev',function(){
    return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])
    .pipe(revCollector())
	.pipe(minifyHtml())
    .pipe(gulp.dest('dist/app/pages/'));
});


//合并html页面内引用的静态资源文件
gulp.task('html', function () {
    return gulp.src('dist/app/pages/*.html')
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace())
    .pipe(gulp.dest('dist/html/'));
})
	minifyHtml = require('gulp-minify-html'),
    revCollector = require('gulp-rev-collector');


	
//gulp-clean 清楚目录
//gulp-minify-css 压缩CSS为一行
//gulp-rev 对文件名加MD5后缀 
//gulp-rev-collector 路径替换
//gulp-jshint 检查js语法
    
//清空文件夹，避免资源冗余
gulp.task('clean',function(){
    return gulp.src('dist',{read:false}).pipe(clean());
});


//css文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出来
gulp.task('css',function(){
    return gulp.src('app/styles/*.css')
	//.pipe(concat('wap.min.css'))
    .pipe(minifyCss())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/styles/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/css'))
});


//js文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出
gulp.task('js',function(){
    return gulp.src('app/scripts/*.js')
    //.pipe( concat('wap.min.js') )
    .pipe(jshint())
    .pipe(uglify())
    .pipe(rev())
    .pipe(gulp.dest('dist/app/scripts/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/js'))
});


//js文件压缩，更改版本号，并通过rev.manifest将对应的版本号用json表示出
gulp.task('img',function(){
    return gulp.src('app/image/*.+(jpg|png|gif)')
    .pipe(rev())
    .pipe(gulp.dest('dist/app/image/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev/img'))
});


//通过hash来精确定位到html模板中需要更改的部分,然后将修改成功的文件生成到指定目录
gulp.task('rev',function(){
    return gulp.src(['dist/rev/**/*.json','app/pages/*.html'])
    .pipe(revCollector())
	.pipe(minifyHtml())
    .pipe(gulp.dest('dist/app/pages/'));
});


//合并html页面内引用的静态资源文件
gulp.task('html', function () {
    return gulp.src('dist/app/pages/*.html')
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace())
    .pipe(gulp.dest('dist/html/'));
})

在命令行运行 gulp clean 逐个运行任务

前端资源缓存与更新

https://my.oschina.net/jathon/blog/404968

http://www.cnblogs.com/1wen/p/5421212.html

参考

http://jingyan.baidu.com/article/14bd256e7f7d7fbb6d2612c4.html

https://segmentfault.com/a/1190000002932998