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串,解决了浏览器缓存,同时实现了前端静态化。