前言
用gulp构建官网的项目，起初用别人配置好的gulpfile来构建，后来发现有很多不人性化的操作，比如说在开发调试中，打印出console，按这个去找源文件的出处，发现代码被压缩了，找的可费劲了，说白就是没分配好开发环境和生产环境的。然后是在生产环境中没清除掉console，作为一枚处女座，忍受不了，于是打算大改造gulpfile.js。如有不足之处，请指出来哈，我将会献上我的膝盖~
分配开发环境和生产环境
在本项目的根目录下新建一个文件夹，命名为"config"，放入相关gulp的配置文件
在config的文件夹里，新建一个文件，为"index.js"，放入相关路径的配置
const SRC_DIR='./src/'; //源路径，不支持相对路径，下面也是const DEV_DIR='./dev/'; //生成开发环境的文件const DIST_DIR='./dist/'; //生成生产环境的文件const config={
src:SRC_DIR,
dist:DIST_DIR,
dev:DEV_DIR,
html:{
src:SRC_DIR+'*.html',
dev:DEV_DIR,
dist:DIST_DIR
},
assets:{
src:SRC_DIR+'assets/**/*',
dev:DEV_DIR+'assets',
dist:DIST_DIR+'assets'
},
style:{
src:SRC_DIR+'style/*.less', //如果是scss或者css，就改对应的
dev:DEV_DIR+'css',
dist:DIST_DIR+'css'
},
script:{
src:SRC_DIR+'script/*.js',
dev:DEV_DIR+'js',
dist:DIST_DIR+'js'
},
img:{
src:SRC_DIR+'images/**/*',
dev:DEV_DIR+'images',
dist:DIST_DIR+'images'
}
};module.exports=config; //把这个接口暴露给别的文件用在config中新建两个文件，分别为"gulpfile.dev.js"，"gulpfile.prod.js"
gulpfile.dev.js
const gulp=require('gulp'); //引用gulp插件const $=require('gulp-load-plugins')(); //自动加载插件，可以省略一个一个引用插件const config=require('./index.js'); //引用配置的路径文件const open=require('open'); //开启服务function dev(){
gulp.task('html:dev',function(){ return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dev)).pipe($.connect.reload())
});
gulp.task('assets:dev',function(){ return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dev)).pipe($.connect.reload())
});
gulp.task('style:dev',function(){ return gulp.src(config.style.src).pipe($.less()).pipe($.autoprefixer({ browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'], cascade: true
})).pipe(gulp.dest(config.style.dev)).pipe($.connect.reload())
});
gulp.task('script:dev',function(){ return gulp.src(config.script.src).pipe($.babel()).pipe($.babel()).pipe(gulp.dest(config.script.dev)).pipe($.connect.reload())
});
gulp.task('img:dev',function(){ return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dev)).pipe($.connect.reload())
});
gulp.task('dev',['html:dev','style:dev','script:dev','img:dev'],function(){
$.connect.server({ root:config.dev, port:3030, livereload:true
});
open('http://localhost:3030');
gulp.watch(config.html.src,['html:dev']);
gulp.watch(config.html.src,['style:dev']);
gulp.watch(config.html.src,['script:dev']);
gulp.watch(config.html.src,['img:dev']);
})
}module.exports=dev;gulpfile.prod.js
//配置生产的文件const gulp=require('gulp'); //引用gulp插件const $=require('gulp-load-plugins')(); //自动加载插件，可以省略一个一个引用插件const config=require('./index.js'); //引用配置的路径文件function prod(){
gulp.task('html',function(){ return gulp.src(config.html.src).pipe($.fileInclude()).pipe(gulp.dest(config.html.dist))
});
gulp.task('assets',function(){ return gulp.src(config.assets.src).pipe(gulp.dest(config.assets.dist))
});
gulp.task('style',function(){ return gulp.src(config.style.src).pipe($.less()).pipe($.autoprefixer({ browseers: ['last 2 versions','Firefox>=20','last 2 Explorer versions','last 3 Safari versions'], cascade: true
})).pipe($.cleanCss({compatibility: 'ie8'}))
.pipe(gulp.dest(config.style.dist))
});
gulp.task('script',function(){ return gulp.src(config.script.src)
.pipe($.babel())
.pipe($.uglify())
.pipe($.stripDebug({ debugger:true,console:true,alert:false
}))
.pipe(gulp.dest(config.script.dist))
});
gulp.task('img',function(){ return gulp.src(config.img.src).pipe($.imagemin()).pipe(gulp.dest(config.img.dist))
});
gulp.task('build',['html','style','script','assets','img'])
}module.exports=prod;是不是一目了然呢？
最后新建gulpfile.js
在本项目的根目录下新建一个文件，为gulefile.js，命令行都是通过这个文件启动
const gulp=require('gulp');const prod=require('./config/gulpfile.prod.js');const dev=require('./config/gulpfile.dev.js');const config=require('./config/index.js');const $=require('gulp-load-plugins')();
dev(); //启动开发环境，gulp devprod(); //启动生产环境, gulp prodgulp.task('clean',function(){
gulp.src([config.dev,config.dist])
.pipe($.clean());
});
gulp.task('sprite', function () { //生成雪碧图，gulp sprite,分别生成dev和dist
let spriteData = gulp.src(config.src+'/images/sprite_2/*.png')
.pipe($.spritesmith({ imgName: 'images/sprite_2.png', cssName: 'css/sprite.css', padding: 2, // 图片之间的间距
algorithm: 'left-right', //图片排列格式，默认是top-down，我这里稍微修改下
algorithmOpts: {sort: false} //是否排序
})); return spriteData.pipe(gulp.dest(config.dist)).pipe(gulp.dest(config.dev));
});插件介绍
gulp-autoprefixer
这个是提供自动添加兼容浏览器的前缀，不需要我们手动添加，不过这并不全的。
gulp-clean
每次生成dist和dev，有时为了预防缓存的问题，需要清除的，但每次要手动清除，作为懒癌症的我都嫌弃了，只想用命令运行就清除掉，所以用这个插件的。
gulp-clean-css
清除css的注释，减少文件的大小，同时为了减少请求的延迟
gulp-connect
这个是创建本地服务器，还能热启动加载
gulp-file-include
//meta.html<title>@@title</title>//index.html@@include('./page/meta.html',{ "title":"首页"})这个是神器的哈，引用共同的html模板，代码如下
gulp-imagemin
压缩图片的大小
gulp-less
把less转化为css
gulp-load-plugins
1、gulp-connect $.connect2、gulp.spritesmith $.spritesmith3、gulp-file-include $.fileInclude
这个是神器的，当引用多个插件的，一个一个require，多繁杂啊，仅require这个插件的，然后在引用其他的插件时，只要写"$.<插件名>"
插件名的例子如下
gulp-strip-debug
$.stripDebug({ debugger:true,console:true,alert:false})我以为结束了，兴高采烈的运行生产环境，手抖的戳，等了“半天”，没看到alert弹出来，emmm，抱自己痛哭的去看参考网址，卧槽，还要改插件的配置，这个开发者是懒得再多配置了么？好吧～
const through = require('through2');const stripDebug = require('strip-debug');const PluginError = require('plugin-error');module.exports = (options) => { return through.obj(function (file, enc, cb) { if (file.isNull()) { cb(null, file); return; } if (file.isStream()) { cb(new PluginError('gulp-strip-debug', 'Streaming not supported')); return; } try { file.contents = Buffer.from(stripDebug(file.contents.toString(),options).toString()); this.push(file); } catch (err) { this.emit('error', new PluginError('gulp-strip-debug', err, {fileName: file.path})); } cb(); }); };module.exports = ((source,options) =>{ options=options || {}; return rocambole.moonwalk(source, node => { options.debugger!==false && stripDebugger(node); options.console!==false && stripConsole(node); options.alert!==false && stripAlert(node); }) })ok了，喜极而泣～
然后再找node_modules里找strip-debug/index.js，修改最后的一段函数
去node_modules里找gulp-file-include/index.js，然后加options，意思是接受上面的配置
去除掉console，alert，debug，对生产环境特别有用。
其实我一开始是拒绝这个插件的，因为这个官方文档没说明不除掉alert的方法，然后没有其他的不错类似这个的插件，只能硬着头皮查更多关于这个的资料，结果找到了，只不过有差别的。下面会给出参考网址
要除掉alert的话，就在生产环境的文件中配置
gulp-ugllify
压缩js的代码
gulp.spritesmith
生成雪碧图
open
这个适合懒癌症的人，不需要每次启动服务时就手动打开浏览器的
然后至于怎么用，看上面的gulpfile配置喽！
然后献上：https://blog.csdn.net/qq_15096707/article/details/54293203
我是参考这个，思路不错的，可以“去粗取精”
作者：Empty莫晓邪
链接：https://www.jianshu.com/p/db49513a40ec
共同学习，写下你的评论
评论加载中...
作者其他优质文章
