导入工具包
```
var gulp = require('gulp'); //导入工具包 require('node_modules里对应模块')
var fileinclude = require('gulp-file-include'); //html include导入
var rev = require('gulp-rev-append'); //添加版本号
var less = require('gulp-less'); //less转译css
var autoprefixer = require('gulp-autoprefixer'); //css自动添加前缀
var htmlmin = require('gulp-htmlmin'); //压缩html
var imagemin = require('gulp-imagemin'); //压缩图片
var cssmin = require('gulp-clean-css'); //压缩css
var uglify= require('gulp-uglify'); //压缩js
var gulpSequence = require('gulp-sequence'); //gulp任务序列加载
var concat = require('gulp-concat'); //文件合并
var cheerio = require('gulp-cheerio'); //替换页面引用路径
var rename= require('gulp-rename'); //替换文件名
```
设置路径
```
var PATH = {
src:'./src/', //源码
dev:'./dev/', //开发
build:'./dist/' //发布
}
```
html include
```
gulp.task('htmlinclude', function() {
return gulp.src([ PATH.src+'html/**/*.html','!'+PATH.src+'html/template/*.html']) //该任务针对的文件
.pipe(fileinclude({
prefix: '@@',//变量前缀 @@include
basepath: '@file',//引用文件路径
indent:true//保留文件的缩进
}))
.pipe(gulp.dest( PATH.dev + 'html' )); //输出文件路径
});
```
html 添加版本号
```
gulp.task('addversion', function () {
return gulp.src( PATH.dev + 'html/*.html') //该任务针对的文件
.pipe(rev()) //该任务调用的模块
.pipe(gulp.dest( PATH.dev + 'html' )); //输出文件路径
});
```
less转css
```
gulp.task('less2css', function () {
return gulp.src([ PATH.src + 'less/*.less','!'+PATH.src+'less/common.less' ]) //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest( PATH.dev + 'css')) //输出文件路径
});
```
添加css前缀
```
gulp.task('addprefix', function () {
return gulp.src( PATH.dev + 'css/*.css')
.pipe(autoprefixer({
browsers: ['last 2 versions', 'Android >= 4.0'],
cascade: true, //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否去掉不必要的前缀 默认：true
}))
.pipe(gulp.dest( PATH.dev + 'css'))
});
```
复制文件
```
gulp.task('devjs',function(){
gulp.src( PATH.src + 'js/*' )
.pipe(gulp.dest( PATH.dev + 'js' ))
return gulp.src( PATH.src+'img/*')
.pipe(gulp.dest( PATH.dev + 'img' ))
});
```
压缩html
```
gulp.task('htmlmin', function () {
return gulp.src( PATH.dev + 'html/*.html') //该任务针对的文件
.pipe(htmlmin({ //该任务调用的模块
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 ==>
removeEmptyAttributes: true,//删除所有空格作属性值 ==>
removeScriptTypeAttributes: true,//删除的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除和的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
}))
.pipe(gulp.dest( PATH.build + 'html')); //输出文件路径
});
```
压缩img
```
gulp.task('imagemin', function () {
return gulp.src( PATH.dev + 'img/*.{png,jpg,gif,ico}') //该任务针对的文件
.pipe(imagemin()) //该任务调用的模块
.pipe(gulp.dest( PATH.build + 'img')); //输出文件路径
});
```
压缩css
```
gulp.task('cssmin', function () {
return gulp.src( PATH.dev + 'css/*.css')
.pipe(cssmin()) //该任务调用的模块
.pipe(gulp.dest( PATH.build + 'css')) //输出文件路径
})
```
压缩Js
```
gulp.task('jsmin', function () {
return gulp.src([ PATH.dev + 'js/*.js'])//该任务针对的文件
.pipe(uglify({ //该任务调用的模块
mangle: true, //类型：Boolean 默认：true 是否修改变量名
compress: true //类型：Boolean 默认：true 是否完全压缩
}))
.pipe(gulp.dest( PATH.build + 'js')); //输出文件路径
});
```
序列执行
```
gulp.task('devhtml',gulpSequence('htmlinclude','addversion'));
gulp.task('devcss',gulpSequence('less2css','addprefix'));
gulp.task('dev',gulpSequence(['devhtml','devcss','devjs','devimg']));
gulp.task('build',gulpSequence('dev',['htmlmin','imagemin','cssmin','jsmin']));
```
默认任务
```
gulp.task('default',['build']);
```
watch监听
```
gulp.task('watch',function(){
gulp.watch( PATH.src + 'less/**/*.less',['less2css']);
gulp.watch( PATH.src + 'html/**/*.html',['htmlinclude']);
gulp.watch( PATH.src + 'js/**/*.js',['devjs']);
})
```
备注
```
//gulp.task(name,[deps], fn) 定义任务 name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs,[options]) 执行任务处理的文件 globs：处理的文件路径(字符串或者字符串数组)
//gulp.src(['js/*.js', '!src/js/**/{test1,test2}.js'])//该任务针对的文件(以及忽略的文件)写法
//gulp.dest(path,[options]) 处理完后文件生成路径
```
