提前建议：学习gulp建议直接上英文网站上学习，因为中文网翻译不及时，已经out了。。
网站上参考别人学习也要看文章首次发表时间，否则你很有可能照着编译依旧不成功。
在我看来，以下的皆因为跟着中文网学习，版本落后导致的bug
- 1、AssertionError: Task function must be specified
gulp.task('build',['minify'],async function (){
await console.log("hello world");
});
以上这种写法是3的写法，4的写法是这样
gulp.task('build',gulp.series('minify', async function (){
await console.log("hello world");
}));
- 2、import换成require
大多数新版本的节点都支持TypeScript或Babel提供的大多数功能，但import/ exportsyntax 除外。如果只需要该语法，请重命名gulpfile.esm.js并安装esm模块。
import {logA} from './data';
logA();
//换成
var logA = require('./data.js');
logA();
gulp压缩scss文件
yarn add gulp-sass
yarn add gulp-minify-css
const {series,task,src,dest} = require('gulp');
const scss = require('gulp-sass');
const cssUglify = require('gulp-minify-css');//用于压缩css
function css(){
return src('src/scss/*.scss')
.pipe(scss())//编译
.pipe(cssUglify())//压缩css
.pipe(dest('output/css'))
}
exports.default = series(css);
//运行 gulp即可
gulp 将多个js打包成一个js文件
yarn add gulp-concat
yarn add gulp-uglify
const {series,task,src,dest} = require('gulp');
const concat = require('gulp-concat'); //用于连接js
const uglify = require('gulp-uglify'); //用于压缩JS
function js(){
return src('src/js/*.js') // -> src('src/js/**/*.js') 两颗星则匹配js下所有的js文件
.pipe(concat('build.min.js'))
.pipe(uglify())
.pipe(dest('output/js'))
}
exports.default = series(js);
实时编译
const { watch } = require('gulp');
exports.default = function() {
// The task won't be run until 500ms have elapsed since the first change
watch('src/*.js', { delay: 500 }, function(cb) {
js();
});
};
使用gulp打包并自动生成html对css，js文件打包后，添加版本号后的引用
const gulp = require('gulp');
const {series,task,src,dest,watch} = require('gulp');
const concat = require('gulp-concat');//用于合并文件
const uglify = require('gulp-uglify'); //用于压缩JS
const scss = require('gulp-sass');//编译css
const cssUglify = require('gulp-minify-css');//用于压缩css
//给文件添加版本号
const clean = require('gulp-clean') // 清空文件夹
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射
function revCss(){
return src(['src/scss/*.scss','src/scss/*.css'])
.pipe(concat('index.scss'))
.pipe(scss())//编译
.pipe(cssUglify())//压缩css
.pipe(rev())
.pipe(gulp.dest('output'))
.pipe(rev.manifest())
.pipe(dest('rev/css'))
}
// js生成文件hash编码并生成 rev-manifest.json文件名对照映射
function revJs(){
return src('src/js/**/*.js')
.pipe(concat('build.min.js'))
// .pipe(uglify())
.pipe(rev())
.pipe(gulp.dest('output'))
.pipe(rev.manifest())
.pipe(dest('rev/js'))
}
//Html替换css、js文件版本
function revHtml() {
return gulp.src(['rev/**/*.json', 'src/*.html'])
.pipe(revCollector({
replaceReved: true
}))
.pipe(dest('output'));
};
// 清空dist文件夹
function cleanAll(){
return src(['rev/*','output/*'])
.pipe(clean())
}
exports.default = series(cleanAll,revJs,revCss,revHtml);
demo的github地址：https://github.com/zxjzx/zxjzx.github.io/tree/master/projects/gulp
gulp命令
yarn init
yarn add gulp
yarn add gulp-concat
yarn add gulp-uglify
yarn add gulp-sass
yarn add gulp-minify-css
yarn add gulp-clean
新建gulpfile.js
webpack-dev-server 提供了一个简单的Web服务器和使用实时重新加载的能力
clean-webpack-plugin 删除旧的打包文件
style-loader css-loader css相关
html-webpack-plugin 打包HTML，自动更新css和js的引入
webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。