前言
用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 dev
prod(); //启动生产环境, gulp prod
gulp.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
- 这个是神器的哈，引用共同的html模板，代码如下
//meta.html <title>@@title</title> //index.html @@include('./page/meta.html',{ "title":"首页" }) -
gulp-imagemin
- 压缩图片的大小
-
gulp-less
- 把less转化为css
-
gulp-load-plugins
- 这个是神器的，当引用多个插件的，一个一个require，多繁杂啊，仅require这个插件的，然后在引用其他的插件时，只要写"$.<插件名>"
- 插件名的例子如下
1、gulp-connect $.connect 2、gulp.spritesmith $.spritesmith 3、gulp-file-include $.fileInclude -
gulp-strip-debug
- 去除掉console，alert，debug，对生产环境特别有用。
- 其实我一开始是拒绝这个插件的，因为这个官方文档没说明不除掉alert的方法，然后没有其他的不错类似这个的插件，只能硬着头皮查更多关于这个的资料，结果找到了，只不过有差别的。下面会给出参考网址
- 要除掉alert的话，就在生产环境的文件中配置
$.stripDebug({ debugger:true,console:true,alert:false })我以为结束了，兴高采烈的运行生产环境，手抖的戳，等了“半天”，没看到alert弹出来，emmm，抱自己痛哭的去看参考网址，卧槽，还要改插件的配置，这个开发者是懒得再多配置了么？好吧～
- 去node_modules里找gulp-file-include/index.js，然后加options，意思是接受上面的配置
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(); }); };- 然后再找node_modules里找strip-debug/index.js，修改最后的一段函数
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了，喜极而泣～
-
gulp-ugllify
- 压缩js的代码
-
gulp.spritesmith
- 生成雪碧图
-
open
- 这个适合懒癌症的人，不需要每次启动服务时就手动打开浏览器的
然后至于怎么用，看上面的gulpfile配置喽！
然后献上：https://blog.csdn.net/qq_15096707/article/details/54293203
我是参考这个，思路不错的，可以“去粗取精”
