Although gulp's official website provides api instructions, actually building an automation project requires installing various dependencies. I queried a lot of information on the Internet, most of which are incomplete or will always report exceptions due to various dependency versions when building. Here, I made a set of basic configuration and instructions based on reference materials and combined with my own needs.
First, install the dependency package.json
{
"name": "glupdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "gulp dev",
"build": "gulp build"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"browser-sync": "^2.27.7",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-babel": "^7.0.1",
"gulp-cache": "^1.1.3",
"gulp-changed": "^4.0.3",
"gulp-clean": "^0.4.0",
"gulp-clean-css": "^4.3.0",
"gulp-file-include": "^2.3.0",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^6.0.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.0.0",
"gulp-rev": "^9.0.0",
"gulp-rev-collector": "^1.3.3",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"gulp-watch": "^5.0.1",
"gulp-webserver": "^0.9.1",
"http-proxy-middleware": "^2.0.1",
"path": "^0.12.7"
},
"dependencies": {
}
}
Then gulpfile.js configuration
const gulp = require("gulp");
const htmlMin = require('gulp-htmlmin') //压缩html
const fileinclude = require('gulp-file-include'); //模块化
const changed = require('gulp-changed');
// browser-sync(浏览器同步测试工具)+del(删除) + path(路径)
const browserSync = require('browser-sync').create();
const del = require('del');
const gulpPath = require('path');
const plumber = require('gulp-plumber'); // 能夠在我们把程式错误改回來后,继续做监看的动作
const uglify = require('gulp-uglify'); // js压缩
const cleanCSS = require('gulp-clean-css'); // css压缩
const sass = require('gulp-sass');
const rename = require('gulp-rename') // 重命名文件
const imagemin = require('gulp-imagemin'); // 图片压缩
const cache = require('gulp-cache'); // 只处理修改的内容
const babel = require('gulp-babel'); // babel编译
const clean = require('gulp-clean'); // 删除文件
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
const proxyMiddleware = require('http-proxy-middleware'); // api代理
const middleware = proxyMiddleware.createProxyMiddleware('/api', {
target: '代理地址',
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
logLevel: 'debug'
});
// 编译前先删除旧文件
gulp.task("clean", function () {
return gulp.src('dist')
.pipe(clean());
})
// 压缩css
gulp.task('css', function () {
return gulp.src('app/css/*.css')
.pipe(changed('dist/css'))
.pipe(plumber())
.pipe(cleanCSS())
// cleanCSS({
// advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
// compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
// keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
// keepSpecialComments: '*'
// //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
// })
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// 打包时加版本号
gulp.task('buildCss', function () {
return gulp.src('app/css/*.css')
.pipe(rev()) //文件名加MD5后缀
.pipe(cleanCSS())
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest('rev-css-manifest.json')) //生成一个rev-manifest.json
.pipe(gulp.dest(`dist/rev`)) // 保存到 rev 目录内
});
// 图片压缩
gulp.task('Imagemin', function () {
return gulp.src('app/images/*.{png,jpg,gif,jpeg,ico}')//后缀都用小写,不然不识别
.pipe(
cache(
imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
})
)
)
.pipe(gulp.dest('dist/images'));
});
// 编译sass
gulp.task('sass', () => {
return gulp.src('app/css/**/*.{sass,scss}')
.pipe(changed('dist/css'))
.pipe(plumber())
.pipe(sass()) //增加这行
.pipe(cleanCSS())
// cleanCSS({
// advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
// compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
// keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
// keepSpecialComments: '*'
// //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
// })
// .pipe(rename({
// suffix: '.min'
// }))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
})
// 打包编译sass
gulp.task('buildSass', () => {
return gulp.src('app/css/**/*.{sass,scss}')
.pipe(sass()) //增加这行
.pipe(rev()) //文件名加MD5后缀
.pipe(cleanCSS())
// cleanCSS({
// advanced: false,//类型:Boolean 默认:true [是否开启高级优化(合并选择器等)]
// compatibility: 'ie7',//保留ie7及以下兼容写法 类型:String 默认:''or'*' [启用兼容模式; 'ie7':IE7兼容模式,'ie8':IE8兼容模式,'*':IE9+兼容模式]
// keepBreaks: true,//类型:Boolean 默认:false [是否保留换行]
// keepSpecialComments: '*'
// //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
// })
.pipe(gulp.dest('dist/css'))
.pipe(rev.manifest('rev-sass-manifest.json')) //生成一个rev-manifest.json
.pipe(gulp.dest(`dist/rev`)) // 保存到 rev 目录内
})
// 压缩js
gulp.task('uglifyJs', function () {
return gulp.src(['app/js/**/*.js'])
.pipe(changed('dist/js/**/'))
.pipe(babel())
.pipe(plumber())
.pipe(uglify({
compress: {
drop_console: false, // 过滤 console
drop_debugger: false // 过滤 debugger
},
warnings: false
})) //加入uglify()的处理
// .pipe(rev()) //文件名加MD5后缀
.pipe(gulp.dest('dist/js'))
// .pipe(rev.manifest('rev-js-manifest.json')) //生成一个rev-manifest.json
// .pipe(gulp.dest(`dist/rev`)) // 保存到 rev 目录内
.pipe(browserSync.reload({
stream: true
}));
});
// 打包压缩JS
gulp.task('buildUglifyJs', function () {
return gulp.src(['app/js/**/*.js'])
.pipe(rev()) //文件名加MD5后缀
.pipe(babel())
.pipe(uglify({
compress: {
drop_console: true, // 过滤 console
drop_debugger: true// 过滤 debugger
},
warnings: true
})) //加入uglify()的处理
.pipe(gulp.dest('dist/js'))
.pipe(rev.manifest('rev-js-manifest.json')) //生成一个rev-manifest.json
.pipe(gulp.dest(`dist/rev`)) // 保存到 rev 目录内
});
// 压缩HTML
gulp.task('htmlMin', 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(['app/*.html', '!app/include/**.html'])
.pipe(changed('dist'))
.pipe(plumber()) //这里添加plumber
.pipe(fileinclude({
prefix: '@', //引用符号
basepath: './app/include', //引用文件路径
indent: true //保留文件的缩进
}))
.pipe(htmlMin(options))
.pipe(gulp.dest('dist'))
.pipe(browserSync.reload({
//内容更改则触发reload
stream: true
}));
});
// 监听更新任务
gulp.task('watch', function () {
// 建立浏览器自动刷新服务器
browserSync.init({
server: {
// livereload: true,
baseDir: "dist", // 设置服务器的根目录
middleware: middleware
},
notify: false, //禁用浏览器的通知元素
port: 3000,
});
var watchHtml = gulp.watch('app/**/*.html', gulp.series('htmlMin'));
var watchJs = gulp.watch('app/js/**/*.js', gulp.series('uglifyJs'));
// 监听css变化
// var watchCss = gulp.watch('src/styles/*.css', gulp.series('css'));
var watchCss = gulp.watch('app/styles/*.{sass,scss}', gulp.series('sass')); //这一块的监听需要把后缀改为scss
var watchImg = gulp.watch('app/images/**/*', gulp.series('Imagemin'));
watchHtml.on('unlink', function (path) {
del('dist/' + gulpPath.basename(path));
});
watchJs.on('unlink', function (path) {
del('dist/js/**/' + gulpPath.basename(path));
});
// css变化时执行
// watchCss.on('unlink', function(path) {
// var cssName = gulpPath.basename(path).split('.css')[0]
// del('dist/css/' + cssName + '.css');
// });
watchCss.on('unlink', function (path) {
var cssName = gulpPath.basename(path).split('.scss')[0]
del('dist/css/' + cssName + '.css');
});
watchImg.on('unlink', function (path) {
del('dist/images/**/' + gulpPath.basename(path));
});
});
// 打包替换版本号的文件名
gulp.task('rev', function () {
//html
return gulp.src([`dist/rev/**/*.json`, `dist/**/*.html`])
.pipe(revCollector({
replaceReved: true }))
.pipe(gulp.dest('dist'));
});
gulp.task('dev', gulp.series('clean', 'htmlMin', 'uglifyJs', 'sass', 'Imagemin', 'watch'));//开发环境
gulp.task('build', gulp.series('clean', 'buildCss', 'buildSass', 'buildUglifyJs','Imagemin','htmlMin','rev')); // 生产打包
.babelrc file configuration
{
"presets": [
"es2015"
],
"plugins": []
}
Project file configuration
Direct cnpm i After installation, gulp dev can be started