Gulp4

安装Gulp官网 gulp4.0分离了处理和核心部分，所以需要分别安装这两个包，另外对环境要求如下： node >= 8.11.1npm >= 5.6.0npx >= 9.7.1全局安装gulp-clinpm i -g gulp-cli本地安装gulpnpm i -D gulp查看版本号$ gulp -v# 输出CLI version: 2.2.0Local version: 4.0.2配置文件在项目根目录创建gulpfile.js文件（如果使用ts或者babel，也可用gulpfile.ts、gulpfile.babel.js分别代替），此文件即gulp会默认读取的配置文件，我们可以在里面配置需要的task。如果task较多或者较复杂，可以创建gulpfile.js目录，在目录中拆分task为多个文件，只要保证该目录下有个index.js作为入口即可。 Tasktask分为两种： Private tasks：配置文件中的一个function，仅能在该文件中使用Public tasks：将Private tasks导出，可以供gulp命令执行const { series, parallel } = require('gulp');// Private tasksfunction clean(cb) { // body omitted cb();}// Private tasksfunction build(cb) { // body omitted cb();}exports.build = build; // Public tasks, 执行gulp buildexports.default = series(clean, parallel(css, javascript)); // Public tasks, 执行gulp注意：在task中，操作完成时，我们必须要通过cb()或者return的方式来告知gulp此任务已完成。 // cbfunction clean(cb) { del(['dist]); cb();});// return function minifyjs() { return src('src/**/*.js') .pipe(minify()) .pipe(dest('dist'));});function promiseTask() { return new Promise(function(resolve, reject) { // body omitted resolve(); });});运行taskgulp <export task name> gulp // 导出为default的task可以直接允许gulp组合taskseries：序列（顺序执行）// task1执行完再执行task2exports.taskName = series(task1, task2)parallel：并行（同时执行）// task1和task2同时执行exports.taskName = parallel(task1, task2)混用：exports.taskName = series(clean, parallel(css, javascript))输入与输出gulp借鉴了Unix的管道（pipe）思想，处理文件采用流的方式，前一步的输出作为后一步的输入，中途不会在磁盘写入文件，仅在dest时输出文件，所以非常快速高效。 ...

gulp 4 前后端不分离模板(切图仔的最爱)前后端不分离的多页应用, 而且前端只是负责做静态图 本脚手架基于gulp 4, 主要功能包括:less以及css的处理: less转css, autoprefixhtml处理: gulp-file-include模板, 对应后端jsp的include语法img压缩热启动js语法检查(因为我是切图仔, 写的js是基本效果, 必须让后端xx看明白)es6 写配置文件TODO压缩与不压缩; 检查完善demo, 例如: 模板demo细节, 比如min文件不压缩, lib库(包含img css js)的处理性能优化运行运行gulp, 查看页面 http://localhost:3000/page/about.html github 下载地址: https://github.com/phoenix-yassin/gulp4-demos

一、前言有些简单前端小项目，不需要涉及框架，前端打包压缩的话本妹子还是喜欢用gulp。本文将用gulp-rev和gulp-rev-rewrite解决cdn缓存问题。以及列出的是本妹子最常用的gulp插件，小伙伴们可以参考。案例地址：https://github.com/raoenhui/g…二、解决浏览器缓存问题gulp-rev1.为静态文件添加唯一hash值，如 unicorn.css → unicorn-d41d8cd98f.css。2.生成map映射文件，方便后面html更换文件名gulp.task(‘js’, () => gulp.src([’./src/app.js’, ‘./src/app2.js’]) .pipe(gulp.dest(‘dist’)) // 将源文件拷贝到打包目录 .pipe(rev()) .pipe(gulp.dest(‘dist’)) // 将生成的hash文件添加到打包目录 .pipe(rev.manifest(‘js-rev.json’)) .pipe(gulp.dest(‘dist’)) // 将map映射文件添加到打包目录);gulp.task(‘css’,()=> { gulp.src(’./src/.css’) .pipe(gulp.dest(‘dist’)) // 将生成的hash文件添加到打包目录 .pipe(rev()) .pipe(gulp.dest(‘dist’))// write rev’d assets to build dir .pipe(rev.manifest(‘css-rev.json’)) .pipe(gulp.dest(‘dist’)) // 将map映射文件添加到打包目录});gulp-rev-rewrite根据rev生成的manifest.json map映射文件, 去替换html文件中的引用名称,gulp.task(‘html’, () => { const jsManifest = gulp.src(‘dist/js-rev.json’); //获取js映射文件 const cssManifest = gulp.src(‘dist/css-rev.json’); //获取css映射文件 return gulp.src(’./.html’) .pipe(revRewrite({manifest: jsManifest})) // 把引用的js替换成有版本号的名字 .pipe(revRewrite({manifest: cssManifest})) // 把引用的css替换成有版本号的名字 .pipe(gulp.dest(‘dist’))});替换成功三、gulp其他常用插件JS相关gulp-babelbabel是一个 JavaScript 编译器。我们主要是用将ES6转换成可以在浏览器中运行的代码。而gulp-babel 的用法、功能和babel 是一样的。先运行 npm install –save-dev gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime，装好babel。const babel = require(‘gulp-babel’);gulp.task(‘js’, () => gulp.src(‘src/app.js’) .pipe(babel({ presets: [’@babel/env’], plugins: [’@babel/transform-runtime’] })) .pipe(gulp.dest(‘dist’)));gulp-sourcemaps找到编译源文件，方便调试源码。const sourcemaps = require(‘gulp-sourcemaps’);gulp.task(‘js’, () => gulp.src(‘src/app.js’) .pipe(sourcemaps.init()) .pipe(babel({ presets: [’@babel/env’], plugins: [’@babel/transform-runtime’] })) .pipe(sourcemaps.write(’.’)) .pipe(gulp.dest(‘dist’)));gulp-concat合并js文件const concat = require(‘gulp-concat’);gulp.task(‘js’, function() { return gulp.src([’./src/app.js’, ‘./src/app2.js’]) .pipe(concat(‘app.js’)) .pipe(gulp.dest(‘dist’));}); CSS相关gulp-postcssCSS预处理器。const postcss = require(‘gulp-postcss’);const autoprefixer = require(‘autoprefixer’); //添加css兼容性写法gulp.task(‘css’, function () { return gulp.src(’./src/.css’) .pipe(postcss([ autoprefixer({ browsers: [ ‘>1%’, ’last 4 versions’, ‘Firefox ESR’, ’not ie < 9’, ‘iOS >= 8’, ‘Android > 4.4’ ], flexbox: ’no-2009’, }) ])) .pipe(gulp.dest(’./dest’));});gulp-clean-css压缩CSSconst cleanCSS = require(‘gulp-clean-css’);gulp.task(‘css’, () => { return gulp.src(‘styles/.css’) .pipe(cleanCSS({compatibility: ‘ie8’})) .pipe(gulp.dest(‘dist’));});HTML相关gulp-inline-source将引用的js、css文件，插入html中，变成内联式引用。const inlinesource = require(‘gulp-inline-source’);gulp.task(‘html’, function () { return gulp.src(’./.html’) .pipe(inlinesource({ compress: false //是否压缩成一行，默认为true压缩 })) .pipe(gulp.dest(’./out’));});gulp-htmlmin压缩htmlconst htmlmin = require(‘gulp-htmlmin’);gulp.task(‘minify’, () => { return gulp.src(‘src/.html’) .pipe(htmlmin({ removeComments: true, //去除备注 collapseWhitespace: true //去除空白 })) .pipe(gulp.dest(‘dist’));}); 其他del删除文件或文件夹const del = require(‘del’);/* 清理一些不是必须的js，css文件 /gulp.task(‘clean’, function() { return del([’./dist/.js’, ‘./dist/*.css’ ]).then(function() { console.log(‘delete unnecessary files for firecrackers’); });});gulp-rename重命名文件const rename = require(‘gulp-rename’);gulp.task(‘html’, function() {.pipe(rename({ dirname: “.”, // 路径名 basename: “index”, // 主文件名 prefix: “pre-”, // 前缀 suffix: “-min”, // 后缀 extname: “.html” // 扩展名 })).pipe(gulp.dest(‘dist’))});其他链接案例地址：https://github.com/raoenhui/gulpExample.git原文地址：https://raoenhui.github.io/js/2019/03/03/gulpHappy coding .. :) ...

介绍这段配置是之前的gulp版本不适配新版本node后，更新到了gulp4的新写法。在业务中，目前使用这份配置的是一个Koa2+njk项目，所以增加了nodemon来启动server。分别用到的技术为：Less + autoprefixer + cleancss + sourceMapJs + es6(babel) + uglify + sourceMapBrowserSync For auto reloadNodemon for restart Koa2 server配置废话不多说，上代码：/* * Gulp4通用配置 * Author: Kinice * Time: 2018-12-26 /const gulp = require(‘gulp’)const path = require(‘path’)const less = require(‘gulp-less’)const browserSync = require(‘browser-sync’).create()const reload = browserSync.reloadconst cleancss = require(‘gulp-cssnano’)const autoprefixer = require(‘gulp-autoprefixer’)const pump = require(‘pump’)const uglify = require(‘gulp-uglify’)const sourcemaps = require(‘gulp-sourcemaps’)const babel = require(‘gulp-babel’)const nodemon = require(‘gulp-nodemon’)const changed = require(‘gulp-changed’)const config = require(’./config’)const port = process.env.PORT || config.port// 将所需的资源path放到一起便于管理const paths = { style: { src: ‘src/less/**/.less’, dest: ‘public/css/’ }, script: { src: ‘src/js//*.js’, dest: ‘public/js/’ }, view: { src: ‘views//*.njk’, dest: ‘views/’ }}// 处理less的taskfunction style(callback) { // pump提供了中断pipe的callback return pump([ gulp.src(path.join(__dirname, paths.style.src)), // 开启sourcemap以方便调试 sourcemaps.init(), less(), autoprefixer({ browsers: [ ‘>1%’, ’last 10 version’, ‘iOS >= 8’ ] }), cleancss(), sourcemaps.write(‘maps’), gulp.dest(path.join(__dirname, paths.style.dest)), reload({ stream: true }) ], callback)}// 处理js的taskfunction script(callback) { return pump([ gulp.src(path.join(__dirname, paths.script.src)), sourcemaps.init(), babel(), uglify(), sourcemaps.write(‘maps’), gulp.dest(path.join(__dirname, paths.script.dest)) ], callback)}// 监测文件修改并调用相应task之后刷新页面function watch() { gulp.watch(path.join(__dirname, paths.style.src), style) gulp.watch(path.join(__dirname, paths.script.src), script) gulp.watch(path.join(__dirname, ${paths.style.dest}*.css)).on(‘change’, reload) gulp.watch(path.join(__dirname, ${paths.script.dest}*.js)).on(‘change’, reload) gulp.watch(path.join(__dirname, ${paths.view.dest}*.njk)).on(‘change’, reload)}// 使用nodemon启动node server，如果不含node就去掉function server() { nodemon({ script: ‘app.js’ }) browserSync.init({ proxy: http://localhost:${port} })}exports.style = styleexports.script = scriptexports.watch = watch// 同步执行script和style tasklet build = gulp.parallel(script, style)// 先build，再同步启动node server和开启文件监测gulp.task(‘default’, gulp.series(build, gulp.parallel(server, watch))) ...

最近想写个项目，由于之前一直写后端，很少接触前端，所以这次来好好学一下前端。看了下Yii框架，它自带了Bootstrap框架，最开始想的是怎么快速写个页面，哪知道这个就像剥洋葱一样，就剥到了学习构建工具的阶段。说个很沮丧的消息，等我把gulp这套工具调通了后，发现Github上居然有很多这样的模板了！废了我3天时间来搞这个东西。给个关键词：bootstrap 4 gulp boilerplate。额，以及还有一个网站，这是我读完bootstrap的文档后发现的：https://vanillajstoolkit.com/…。在项目目录下的babelln/gulpfile.babel.js:// 如果要编译babel可以启用// const babel = require(‘gulp-babel’);// const concat = require(‘gulp-concat’);// const uglify = require(‘gulp-uglify’);const del = require(“del”);const gulp = require(“gulp”);const browserSync = require(“browser-sync”);const sassCompile = require(“gulp-sass”);const server = browserSync.create();const paths = { scripts: { src: “src/scripts/.js”, dest: “dist/scripts” }, css: { src: “src/scss/.scss”, dest: “dist/css” }};// 定义清理方法，会删除dist目录const clean = () => del([“dist”]);// 定义需要拷贝到dist目录的文件，一般APP最终使用的JS和CSS文件在这个目录中const scriptFiles = [ paths.scripts.src, “node_modules/bootstrap/dist/js/bootstrap.min.js”, “node_modules/jquery/dist/jquery.min.js”, “node_modules/popper.js/dist/umd/popper.min.js”];// 编译babel文件的时候使用// function scripts() {// return gulp.src(paths.scripts.src, { sourcemaps: true })// .pipe(babel())// .pipe(uglify())// .pipe(concat(‘index.min.js’))// .pipe(gulp.dest(paths.scripts.dest));// }// 将源代码文件复制到目的地，中间可以加入其他处理程序function scripts() { return gulp.src(scriptFiles).pipe(gulp.dest(paths.scripts.dest));}// 重启web服务function reload(done) { server.reload(); done();}// 编译sass文件，在dist/css目录产生结果文件function sass() { return gulp .src([“node_modules/bootstrap/scss/bootstrap.scss”, paths.css.src]) .pipe(sassCompile()) .pipe(gulp.dest(paths.css.dest));}// 服务初始化，以当前目录babelln/作为网站根目录function serve(done) { server.init({ server: { baseDir: “./” } }); done();}// 定义需要监控的文件const watches = [paths.scripts.src, “*.html”, paths.css.src];// 定义watch函数，它监控watches定义的文件，然后顺序执行这些方法const watch = () => gulp.watch(watches, gulp.series(scripts, sass, reload));// 再包装一层，整个流程就是清理，编译脚本，编译sass，初始化web服务，启动监控const dev = gulp.series(clean, scripts, sass, serve, watch);// 暴露默认方法给外部程序exports.default = dev;这个就是根据gulp官方的模板来捏的，最终还算是可以工作。最后放个效果图^^编译界面： ...

gulp使用有时间的话还是多看看开发文档，gulp API文档，这里简单介绍一下。gulp.js是一个前端构建工具，上手非常容易。适合简单原生JavaScript项目压缩处理。1. gulp安装首先确定电脑已装node环境。然后以全局方式安装gulp：npm install -g gulp全局安装完gulp后，还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中，然后在命令行中执行：npm install gulp 或 npm install –save-dev gulp2. 开始使用gulp此处省去gulp各种插件的安装。简单介绍一下js、html、css、images压缩方法。使用gulp，仅需知道4个API即可：gulp.task()，gulp.src()，gulp.dest()，gulp.watch()这里推荐看这篇文章，介绍的很详细前端构建工具gulpjs的使用介绍及技巧直接上例子：‘use strict’;var gulp = require(‘gulp’);var imagemin = require(‘gulp-imagemin’); // 图片压缩var uglify = require(“gulp-uglify”); // js压缩var babel = require(“gulp-babel”); // babelvar minifyCss = require(“gulp-minify-css”); // css文件压缩var minifyHtml = require(“gulp-minify-html”); // html文件压缩var clean = require(‘gulp-clean’);// js压缩gulp.task(‘minify-cas_login-js’, async function () { await gulp.src(‘src/cas-login/cas.js’) .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest(‘dist/cas-login’));});// js复制gulp.task(‘copy-cas_login-js’, async function () { await gulp.src(‘src/cas-login/.min.js’) .pipe(gulp.dest(‘dist/cas-login’));});// css压缩gulp.task(‘minify-cas_login-css’, async function () { await gulp.src(‘src/cas-login/.css’) // 要压缩的css文件 .pipe(minifyCss()) //压缩css .pipe(gulp.dest(‘dist/cas-login’));});// html压缩gulp.task(‘minify-cas_login-html’, async function () { await gulp.src(‘src/cas-login/.html’) // 要压缩的html文件 .pipe(minifyHtml()) //压缩 .pipe(gulp.dest(‘dist/cas-login’));});// 图片压缩gulp.task(‘minify-cas_login-images’, async function () { await gulp.src(‘src/cas-login/images/’) .pipe(imagemin()) .pipe(gulp.dest(‘dist/cas-login/images’));});// Clean existed buildgulp.task(‘clean-cas_login’, async function () { await gulp.src( [ ‘dist/cas-login/*’ ]) .pipe(clean({force: true}));});// Build cas-logingulp.task(’login-build’, gulp.series(‘clean-cas_login’, gulp.parallel(‘minify-cas_login-js’, ‘minify-cas_login-css’, ‘minify-cas_login-html’, ‘minify-cas_login-images’), done => { done();}));这里重点介绍常见问题 。问题一：gulp: Did you forget to signal async completion?控制台打出如下提示： The following tasks did not complete: testGulpDid you forget to signal async completion?解决办法： 使用 async 和 await。方法一：const gulp = require(‘gulp’);gulp.task(’testGulp’, async() => { await console.log(‘Hello World!’);});方法二：官方方法向task的函数里传入一个名叫done的回调函数，以结束taskgulp.task(’testGulp’, done => { console.log(‘Hello World!’); done();});问题二：AssertionError: Task function must be specified。出现这个问题，主要是版本造成的，gulp 3 和 gulp 4运行方式是不一样的，所以会出现错误。Gulp3，如果有一个任务A，B和C的列表，你想在一个序列中运行（确保A在B开始之前完成，而B在C开始之前完成），代码如下：gulp.task(‘a’, function () { // Do something.});gulp.task(‘b’, [‘a’], function () { // Do some stuff.});gulp.task(‘c’, [‘b’], function () { // Do some more stuff.}); Gulp 4中，你不能再这样做了，会得到以下错误：assert.js:85 throw new assert.AssertionError({ ^AssertionError: Task function must be specified at Gulp.set [as _setTask] (/home/hope/web/node_modules/undertaker/lib/set-task.js:10:3) at Gulp.task (/home/hope/web/node_modules/undertaker/lib/task.js:13:8) at Object.<anonymous> (/home/hope/web/gulpfile.js:31:6) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.require (module.js:497:17) at require (internal/module.js:20:19) 需要使用gulp.series和gulp.parallel，因为gulp任务现在只有两个参数。gulp.series：按照顺序执行gulp.paralle：可以并行计算gulp.task(‘my-tasks’, gulp.series(‘a’, ‘b’, ‘c’, function() { // Do something after a, b, and c are finished.})); gulp.task(‘build’, gulp.parallel(‘styles’, ‘scripts’, ‘images’, function () { // Build the website.})); 如果b,c任务依赖a任务，这样gulp.task(‘my-tasks’, gulp.series(‘a’, gulp.parallel(‘b’, ‘c’), function() { // Do something after a, b, and c are finished.})); 多任务进行会遇到的问题主要就是这个 ...