//tip1、gulp任务是异步的,task写法上可以省略return,但在需要同步执行任务时,这个return是不能省略的。
//tip2、安装gulp时,一定要全局安装一个,项目依赖安装一个,要使用gulp的命令必须全局安装
/*
* 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 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
//
/**
* dev本地测试环境
* build最终的发布环境
* */
//先清除dev和build目录下的js、css、img、html
gulp.task("del",function(){
return del(['dev/js/*.js','dev/img/*.*','dev/css/*.css','build/js/*.js','build/css/*.css','build/img/*.*','dev/*.html'])
})
/***********本地调试环境***********/
// 合并并压缩js,合并并压缩css
gulp.task('hebing_js',function(){
return gulp.src(['GF-WIFI/js/adaptive.js','GF-WIFI/js/zepto.min.js','GF-WIFI/js/zepto.touch.js','GF-WIFI/js/swiper.jquery.min.js','GF-WIFI/js/dropload.min.js','GF-WIFI/js/index.js'])
.pipe(concat('main.js'))//先合并
.pipe(uglify({ mangle: {eval:true} }))
.pipe(gulp.dest('dev/js'))
})
//压缩并合并css
gulp.task('hebing_css',function(){
return gulp.src(['GF-WIFI/css/index.css','GF-WIFI/css/swiper.min.css','GF-WIFI/css/reset.css','GF-WIFI/css/dropload.css'])
.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(concat('main.css'))//先合并
.pipe(clean_css())//压缩css
.pipe(gulp.dest('dev/css'))
})
//处理html
gulp.task('minhtml', 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('GF-WIFI/*.html')
// .pipe(replace(/\<\!--should move start--\>[^]*\<\!--should move end--\>/g, ''))
.pipe(replace(/\<\!--link move start--\>[^]*\<\!--link move end--\>/g, '<link rel="stylesheet" type="text/css" href="./css/main.css"/>'))
.pipe(replace(/\<\!--js move start--\>[^]*\<\!--js move end--\>/g, '<script src="./js/main.js"> </script>'))
.pipe(htmlmin(options))
.pipe(gulp.dest('dev/'));
});
// gulp.task('del_script',function(){
// return gulp .src('GF-WIFI/*.html')
// .pipe(gulp.dest('dev'))
// // return gulp.src('GF-WIFI/*.html')
// // .pipe(cheerio(function($){
// // if($('script')){
// // console.log('数据%o',$('script'))
// // $('script').remove();
// // $('body').append('<script src="./js/main.js"></script>')//这个会为每一个html加这个压缩合并的js
// // }
// // }))
// // // .pipe(htmlmin())
// // .pipe(gulp.dest('dev'))
// })
//将img里面的图片转到其他目录
gulp.task('move_img',function(){
return gulp.src('GF-WIFI/img/*.*')
.pipe(gulp.dest('dev/img'))
})
gulp.task('default', gulpSequence(
['del'], ['hebing_js'],['hebing_css'],['minhtml'],['move_img'],['watch_css']
))
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')
// })
//编译的less
gulp.task('less',function(){
return gulp.src('learn_less/less/*.*')
.pipe(
less().on('error', function (e) {
console.error(e.message)
this.emit('end')
})
)
.pipe(gulp.dest('learn_less/css'))
})
gulp memo
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325891430&siteId=291194637
Recommended
Ranking