gulp的官网虽然提供了api说明，但实际构建一个自动化项目还需要安装各种依赖。网上查询了很多资料，大部分不完整或者具体构建的时候总会因为各种依赖版本原因报出异常。这里通过参考资料再结合自己的需求做了一套基本的配置加说明
首先安装依赖方面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": {
}
}
然后gulpfile.js配置
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文件配置
{
"presets": [
"es2015"
],
"plugins": []
}
项目文件配置
直接cnpm i 安装后 gulp dev启动就行了