/*
* 1.为了减少http请求,把三个js合并成一个js,
* 2.为了减少js请求的加载时间,把合并后的js压缩成一个min.js
* 3.原来的三个js已经变成了一个js.需要把输出的jsp文件里的三个<script>去掉.换成引用新的min.js
* tip:gulp任务是异步的,task写法上可以省略return,但在需要同步执行任务时,这个return是不能省略的。
* */
var gulp = require('gulp');
var uglify = require('gulp-uglify');//压缩js
var clean_css = require('gulp-clean-css');//压缩css
var concat = require('gulp-concat');//合并代码
var less = require("gulp-less") // 编译 less
var del = require('del') // 删除代码
var notify = require('gulp-notify') // 消息通知
var rev = require("gulp-rev") //生成版本 hash 的静态文件
var gutil = require("gulp-util")// 一个工具库 //如果有自定义方法,会用到
var plumber = require("gulp-plumber") // 自动处理全部错误信息防止因为错误而导致 watch 不正常工作
var changed = require("gulp-changed") // 只编译修改过的文件,加快速度
var gulpFilter = require('gulp-filter') //过滤文件
var override = require('gulp-rev-css-url') // 修正 css 文件里面的图片路径
var clean = require("gulp-clean") // 清除目录或文件
var gulpSequence = require('gulp-sequence');///每个同步执行的任务组用[]包起来,用逗号隔开,[]里面的任务将会异步执行
var fileinclude = require('gulp-file-include') // include复用html,详情见博客https://blog.csdn.net/u011500781/article/details/52311763
var inlinesource = require('gulp-inline-source') // 将js,css从外联变成内联
var replace = require('gulp-replace')//替换 ,例如实现将外联css变成内联
/*通过 gulp-replace 替换 link
(1)首先 html 页面中应该有对应 css 文件的 link 标签
(2)通过 gulp 把 link 标签替换成 style 标签的,并添加对应的 css 内容*/
var useref = require('gulp-useref') // 文件合并和替换
var gulpif = require('gulp-if') // if
var cheerio = require('gulp-cheerio')//dom操作
var htmlmin = require('gulp-htmlmin')//压缩html
var css_version = require('gulp-make-css-url-version')//css 文件里的 url 加版本号(根据引用文件的 MD5 生成版本号)。
var gulp_autoprefixer = require('gulp-autoprefixer')//自动处理css的前缀
//使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。(特别是开发移动端页面时,就能充分体现它的优势)
/**将px转化成rem**/
//详细情况见博客http://www.yaya12.com/archives/710
var postcss = require('gulp-postcss') // postcss
var px2rem = require('postcss-px2rem') // pxtorem
// var handleErrors = require('./lib/handleError')
var browserSync = require('browser-sync').create()
var reload = browserSync.reload
//
/**
* dev本地测试环境
* build最终的发布环境
* */
//先清除dev和build目录下的js、css、img、html
gulp.task("del", function () {
return del(['dev/js/*.js', 'dev/img/*.*', 'dev/css/*.css', 'dev/*.html'])
})
/***********本地调试环境***********/
// 合并并压缩js,合并并压缩css
gulp.task('yasuo_js', function () {
return gulp.src('learn_less/js/*.js')
// .pipe(concat('main.js'))//先合并
.pipe(uglify({mangle: {eval: true}})) //压缩
.pipe(gulp.dest('dev/js'))
})
//压缩并合并pxTorem
gulp.task('yasuo_css', function () {
var processors = [px2rem({
remUnit: 75
})]
//编译的less
return gulp.src('learn_less/less/*.less')
.pipe(
less().on('error', function (e) {
console.error(e.message)
this.emit('end')
})
)
.pipe(gulp_autoprefixer({//根据设置浏览器版本自动处理浏览器前缀
browsers: ['last 2 versions', 'last 2 Explorer versions', "Firefox >= 20"],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove: true //是否去掉不必要的前缀 默认:true
}))
.pipe(postcss(processors))
.pipe(clean_css())//压缩css
.pipe(gulp.dest('dev/css'))
})
//处理include
gulp.task('include', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
return gulp.src('learn_less/*.html')
.pipe(fileinclude())
// .on('error', handleErrors)//先include
// .pipe(htmlmin(options))//压缩
.pipe(gulp.dest('dev/'));
});
//移动不需要处理的css
gulp.task('move_css', function () {
return gulp.src('learn_less/css/*.*')
.pipe(gulp.dest('dev/css'))
// .pipe(notify({
// message: '图片移动成功'
// }))
})
//将img里面的图片转到其他目录
gulp.task('move_img', function () {
return gulp.src('learn_less/img/*.*')
.pipe(gulp.dest('dev/img'))
// .pipe(notify({
// message: '图片移动成功'
// }))
})
gulp.task('move_font', function () {
return gulp.src('learn_less/font/*.*')
.pipe(gulp.dest('dev/font'))
.pipe(notify({
message: "字体移动成功"
}))
})
gulp.task('move_include', function () {
return gulp.src('learn_less/include/*.*')
.pipe(gulp.dest('dev/include'))
.pipe(notify({
message: "include移动成功"
}))
})
//监听各文件的变化并自动刷新页面
gulp.task('watch:html', function () {
gulp.watch('learn_less/*.html', ['include'])
})
gulp.task('watch:include', function () {
gulp.watch('learn_less/include/*.*', ['include'])
})
gulp.task('watch:less', function () {
gulp.watch('learn_less/less/*.less', ['yasuo_css'])
})
gulp.task('watch:css', function () {
gulp.watch('learn_less/css/*.css', ['move_css'])
})
gulp.task('watch:js', function () {
gulp.watch('learn_less/js/*.js', ['yasuo_js'])
})
gulp.task('watch:others', function () {
gulp.watch([
'learn_less/font/*.*',
'learn_less/img/*.*',
'learn_less/include/*.*'
], function (event) {
switch (event.type) {
case 'deleted':
// 之所以删除再移动,是为了防止重命名文件只导致的文件删除的问题
gutil.log(event.path + ' deleted')
var tmp = event.path.replace(/learn_less/, 'dev')
gutil.log(tmp)
del([tmp])
// 获取所在的文件夹名称
var target = event.path.match(/learn_less[\/|\\](.*?)[\/|\\]/)[1]
gutil.log(target)
gulp.src('learn_less/' + target + '/*.*')
.pipe(gulp.dest('dev/' + target))//响应比较慢,再问间列表里面出来的比较慢
break
case 'added':
gutil.log(event.path + ' added')
var target = event.path.match(/learn_less[\/|\\](.*?)[\/|\\]/)[1]
gutil.log(target)
gulp.src('learn_less/' + target + '/*.*')
.pipe(gulp.dest('dev/' + target))
break
case 'changed':
gutil.log(event.path + ' changed')
var target = event.path.match(/learn_less[\/|\\](.*?)[\/|\\]/)[1]
gulp.src('learn_less/' + target + '*.*')
.pipe(gulp.dest('dev/' + target))
break
}
})
})
gulp.task('watch:dev', function () {
gulp.watch(['dev/**/*.*','dev/*.*']).on('change',reload)
})
//静态服务器
gulp.task('browser-sync', function () {
return browserSync.init({
server: {
baseDir: './dev/'
},
port: "3000"
})
})
gulp.task('default', gulpSequence(
['del', 'yasuo_js', 'yasuo_css', 'include', 'move_img','move_include','move_font','move_css'], ['watch:html', 'watch:css','watch:less','watch:js' , 'watch:dev','watch:others'], ['browser-sync']
))
/********
* 生产环境
* build
* *********/
//现清空build文件
gulp.task('build_del',function(){
return del(['build/js/*.js', 'build/css/*.css', 'build/img/*.*','build/font/*.*','build/*.html'])
})
//处理js
gulp.task('build_js',function(){
return gulp.src('learn_less/js/*.js')
// .pipe(concat('main.js'))//先合并
.pipe(uglify({mangle: {eval: true}})) //压缩
.pipe(gulp.dest('build/js'))
})
//处理css
gulp.task('build_less', function () {
var processors = [px2rem({
remUnit: 75
})]
//编译的less
return gulp.src('learn_less/less/*.less')
.pipe(
less().on('error', function (e) {
console.error(e.message)
this.emit('end')
})
)
.pipe(gulp_autoprefixer({//根据设置浏览器版本自动处理浏览器前缀
browsers: ['last 2 versions', 'last 2 Explorer versions', "Firefox >= 20"],
cascade: true, //是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove: true //是否去掉不必要的前缀 默认:true
}))
.pipe(postcss(processors))
.pipe(clean_css())//压缩css
.pipe(gulp.dest('build/css'))
})
//移动css框架
gulp.task('build_css', function () {
return gulp.src('learn_less/css/*.*')
.pipe(gulp.dest('build/css'))
// .pipe(notify({
// message: 'css移动成功'
// }))
})
gulp.task('build_img', function () {
return gulp.src('learn_less/img/*.*')
.pipe(gulp.dest('build/img'))
// .pipe(notify({
// message: '图片移动成功'
// }))
})
//处理include
gulp.task('build_include', function () {
var options = {
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
minifyJS: true,//压缩页面JS
minifyCSS: true//压缩页面CSS
};
return gulp.src('learn_less/*.html')
.pipe(fileinclude())
// .on('error', handleErrors)//先include
.pipe(htmlmin(options))//压缩
.pipe(gulp.dest('build/'));
});
//将img里面的图片转到其他目录
gulp.task('build_img', function () {
return gulp.src('learn_less/img/*.*')
.pipe(gulp.dest('build/img'))
// .pipe(notify({
// message: '图片移动成功'
// }))
})
gulp.task('build_font', function () {
return gulp.src('learn_less/font/*.*')
.pipe(gulp.dest('build/font'))
.pipe(notify({
message: "字体移动成功"
}))
})
gulp.task('build',gulpSequence(
['build_del'],['build_js'],['build_css'],['build_include'],['build_img'],['build_font'],['build_less']
))
// gulp.task('watch_css', function () {
// gulp.watch('GF-WIFI/css/*.css', function (event) {
// switch (event.type) {
// case 'deleted':
// break
// case 'added':
// break
// case 'changed':
// gutil.log(event.path + ' changed')
// // var target = event.path.match(/src[\/|\\](.*?)[\/|\\]/)[1]
// // gulp.src(path.dirs.src + target + '/**/*.*')
// // .pipe(gulp.dest(path.dirs.dev + target))
// break
//
// }
// })
// })
// gulp.task('hebing_css',function(){
// var px_rem=[px2rem({
// remUnit:75
// })]
// return gulp.src('GF-WIFI/css/*.css')
// .pipe(concat('main.css'))
// .pipe(clean_css())
// .pipe(gulp_autoprefixer({
// browsers: ['last 2 versions', 'Android >= 4.0'],
// cascade: true, //是否美化属性值 默认:true 像这样:
// //-webkit-transform: rotate(45deg);
// // transform: rotate(45deg);
// remove:true //是否去掉不必要的前缀 默认:true
// }))
// .pipe(postcss(px_rem))
// .pipe(gulp.dest('dev/css'))
// })
// // gulp.task('default', function() {
// // // 将你的默认的任务代码放在这
// // gulp.start('del','hebing_js','hebing_css');
// // })
// gulp.task('default', function() {
// // 将你的默认的任务代码放在这
// gulp.start('del','hebing_js','hebing_css','del_script','move_img');
// })
// gulp.task('test',function(){
// console.log('ceshi')
// })
转载于:https://my.oschina.net/u/3407699/blog/1802314