新建项目Gulp-Project，执行
npm init初始化项目生成package.json文件，然后再创建config文件夹，新建index.js（公共部分）、gulpfile.dev.js（开发环境）、gulpfile.prod.js（生产环境）。当然了，要打包编译的文件内容一般都放在都在根目录src里面。
项目结构：
Gulp-Project
├── README.md
├── config
│ ├── gulpfile.dev.js
│ ├── gulpfile.prod.js
│ └── index.js
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
├── assets
│ └── common.css
├── images
│ ├── sprite_2
│ │ ├── 01.jpg
│ │ ├── 02.jpg
│ │ └── 03.jpg
│ └── t3.png
├── index.html
├── script
│ └── index.js
└── style
├── style.css
└── style2.css
接下来开始写config文件夹里面的公共部分的js——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/*.css', //如果是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; //把这个接口暴露给别的文件用
配置开发环境文件gulpfile.dev.js：
//配置开发的文件
const gulp = require('gulp'); //引用gulp插件
const $ = require('gulp-load-plugins')(); //自动加载插件，可以省略一个一个引用插件
const config = require('./index.js'); //引用配置的路径文件
const open = require('open'); //开启服务
const revCollector = require('gulp-rev-collector'); //来自清单的静态资产修订数据收集器（由不同的流生成），并替换其在html模板中的链接。
function dev() {
gulp.task('html:dev', function () {
var optins = {
removeComments: true,//清除HTML注释
collapseWhitespace: true, //压缩HTML
minfyJS: true,//压缩JS
minfyCss: true,//压缩CSS
}
return gulp.src(['./rev/**/*.json',config.html.src])
// .pipe($.htmlmin(optins))
.pipe(revCollector({
replaceReved: true,//允许替换, 已经被替换过的文件
dirReplacements: {
'style': 'css',
'script': 'js',
// 'cdn/': function(manifest_value) {
// return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
// }
}})) //替换html中的引用
.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($.rev()) //添加hash后缀 -- 文件名加MD5后缀
.pipe($.cssmin())
.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($.rev.manifest()) //生成文件映射
.pipe(gulp.dest("rev/css")) //将映射文件导出到rev/css中
.pipe($.connect.reload())
});
gulp.task('script:dev', function () {
return gulp.src(config.script.src)
.pipe($.babel())
.pipe($.uglify())
.pipe(gulp.dest(config.script.dev))
.pipe($.rev()) //添加hash后缀 -- 文件名加MD5后缀
.pipe($.rev.manifest()) //生成文件映射
.pipe(gulp.dest("rev/js")) //将映射文件导出到rev/js中
.pipe($.connect.reload())
});
gulp.task('img:dev', function () {
return gulp.src(config.img.src)
.pipe($.imagemin({ progressive: true }))
.pipe(gulp.dest(config.img.dev))
.pipe($.connect.reload())
});
gulp.task('connect', function (cb) {
$.connect.server({
root: config.dev,
port: 8081,
livereload: true
});
open('http://localhost:8081');
cb();//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})
gulp.task('watchs',function(){
gulp.watch(config.html.src, gulp.series('html:dev'));
gulp.watch(config.html.src, gulp.series('style:dev'));
gulp.watch(config.html.src, gulp.series('script:dev'));
gulp.watch(config.html.src, gulp.series('img:dev'));
})
gulp.task('dev', gulp.series(gulp.parallel('style:dev', 'script:dev','img:dev'),'html:dev','connect','watchs'), function () {
// console.log('ok')
// $.connect.server({
// root: config.dev,
// port: 8080,
// livereload: true
// });
// open('http://localhost:8080');
// 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($.cssmin()).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', gulp.parallel('html', 'style', 'script', 'assets', 'img'))
}
module.exports = prod;
最后是gulpfile.js：把 config里的文件引入，这里还写有歇息公共的任务，雪碧图还有文件的清理都是放在这里。
const gulp = require('gulp');
const del = require('del');
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 build
/*
gulp.task('clean', async function () {
await gulp.src([config.dev, config.dist])
.pipe($.clean());
});
*/
gulp.task('clean:dev', function() {//删除之前生成的文件
return del(['dev','rev','dist']);
});
gulp.task('sprite', async function () { //生成雪碧图，gulp sprite,分别生成dev和dist
let spriteData = await gulp.src(config.src + '/images/sprite_2/*.{png,jpg,gif,ico,jpeg}')
.pipe($.spritesmith({
imgName: 'images/sprite_2.png',
cssName: 'style/sprite.css',
padding: 2, // 图片之间的间距
algorithm: 'left-right', //图片排列格式，默认是top-down，我这里稍微修改下
algorithmOpts: { sort: false } //是否排序
}));
return spriteData.pipe(gulp.dest(config.src)).pipe(gulp.dest(config.dist)).pipe(gulp.dest(config.dev));
});
最后再贴一下我的package.json，因为我为了方便，把启动命令也配在这个文件了：
"scripts": {
"dev": "gulp dev",
"build": "gulp build",
"del": "gulp clean:dev",
"sprite": "gulp sprite"
},
网友评论