GX博客

分享个人 Full-Stack JavaScript 项目开发经验

使用Gulp自动化构建同构应用的实例分享

创建 ， 修改 ， 作者 leeguangxing.cn，阅读数：1045

在 Javascript 应用开发过程中，我们需要解决很多构建过程中的不断重复的任务，还有是在每次更新发布时候执行的打包工作。目前如 Gulp、webpack 等基于 node.js 的强大工具可以帮助我们自动化完成这些重复任务。本文将分享一个个人的 Gulp 配置实例，为了解决项目起初的静态交互页面开发、图片样式和脚本的处理、同构应用的开发和打包等问题。

选择的插件和依赖

图片压缩及交错处理

  • gulp-imagemin

样式的预编译、压缩及添加前缀处理

  • node-sass
  • gulp-sass
  • gulp-autoprefixer
  • gulp-cssmin

source map 及文件名处理

  • gulp-sourcemaps
  • gulp-rename
  • gulp-hash-filename

旧哈希名文件的清理

  • gulp-clean

旧哈希文件名的替换

  • gulp-replace

Javascript的压缩和合并处理

  • gulp-uglify
  • gulp-concat

动态刷新的 web server

  • gulp-connect

babel 编译

  • @babel/core
  • @babel/plugin-proposal-class-properties
  • @babel/preset-env
  • @babel/preset-react
  • gulp-babel

以流的方式运行webpack

  • webpack
  • webpack-stream

图片压缩及交错处理

function imageMin() {
  return src(
    `${dir.imageDev}/**/*.{png,jpg,gif,svg}`,
    {since: lastRun(imageMin)} // 跳过自上次成功完成任务以来没有更改的文件，在 watch() 模式下可增量构建
  )
    .pipe(imagemin())
    .pipe(dest(dir.imagePro))
    .pipe(connect.reload());
}

图片的压缩和转换比较耗时，所以上面的任务中使用了 lastRun 实现增量执行以提高任务完成效率。再而就是使用 gulp-connect 实现图片更新后的浏览器自动刷新。


样式的预编译、压缩及添加前缀处理

function cssMin() {
  return src([`${dir.sass}/index.scss`, `${dir.sass}/admin.scss`])
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(hash({format: "{name}.{hash:8}{ext}"}))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.cssPro;
    }));
}

以上任务充分体现了基于流的任务构建的优势。在流中完成了 sass 编译、自动添加浏览器前缀、压缩、哈希和 min 文件名修改，最后再写入到文件系统，并记录生成的哈希文件名称。


旧哈希名文件的清理

function cleanCss() {
  return src(`${dir.cssPro}/**/*.css`, {
    read: false // 删除文件时不读取它的内容
  })
    .pipe(clean({
      force: true // 设置允许删除工作目录以外的文件和目录cl
    }));
}

function cleanJs() {
  return src(`${dir.jsBundle}/**/*.js`, {
    read: false // 删除文件时不读取它的内容
  })
    .pipe(clean({
      force: true // 设置允许删除工作目录以外的文件和目录cl
    }));
}

清除任务需要注意异步和重复执行的问题。上面的清除目录为 nginx 静态资源托管目录。


旧哈希文件名的替换

// 哈希文件记录
let hashFileNames = [];
function replaceHashFileNames() {

  let stream = src([
    dir.homePage,
    dir.loginPage,
    dir.adminPage,
    dir.adminHtml
  ]);

  for (let i = 0; i < hashFileNames.length; i++) {
    // 根据哈希文件名生成对应规则的正则，并替换
    const currentFileName = hashFileNames[i];
    const reg = new RegExp(currentFileName.replace(
      /([a-zA-Z]+)\.[a-zA-Z0-9]+\.min\.(css|js)/,
      '$1\\.[a-zA-Z0-9]+\\.min\\.$2'), 'g');
    stream = stream.pipe(replace(reg, currentFileName));
  }

  return stream.pipe(dest(function (file) {
    return file.base;
  }));
}

在创建写入到文件系统的流时候，把每个流的 file.basename 记录到 hashFileNames 数组中。最后使用 gulp-replace，按照约定的文件命名规则将新的哈希文件名替换到指定的文件内容中。该项任务一般在最后执行。


Javascript的压缩和合并处理

// options 详见 https://github.com/mishoo/UglifyJS2
function compressJs() {
  return src([`${dir.jsDev}/vendor/*.js`, `${dir.jsDev}/*.js`, `!${dir.jsDev}/**/*.min.js`])
    .pipe(uglify(
      {
        compress: {
          properties: false, // 不重写引号属性
          keep_fnames: true, // 保留函数名称
          drop_console: true, // 去除控制台输出
          keep_fargs: true // 保留函数冗余参数
        },
        output: {
          comments: false // 去掉注释
        }
      }
    ))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      return file.base;
    }));
}

function concatFrontJs() {
  return src([
    `${dir.jsDev}/vendor/jquery-3.3.1.min.js`,
    `${dir.jsDev}/vendor/bootstrap.front.min.js`,
    `${dir.jsDev}/vendor/ie10-viewport-bug-workaround.min.js`,
    `${dir.jsDev}/vendor/jquery.pagination.min.js`,
    `${dir.jsDev}/vendor/jquery.qrcode.min.js`
  ])
    .pipe(concat('front-bundle.js'))
    .pipe(hash({format: "{name}.{hash:8}{ext}"}))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.jsBundle;
    }));
}

一般需要使用 gulp 进行合并压缩的 Javascript 都是遗留项目的非 npm 规范的包。它们相对独立，也有可能作为全局引用，所以这里压缩配置尽可能的保留函数名称和属性等。同样的，在捆绑后记录对应的哈希文件名称。


动态刷新的 web server

function connectServer() {
  connect.server({
    port: 8000,
    index: false,
    livereload: true
  });
}

在构建静态交互页面时，我们需要一个可视化界面进行开发。结合 gulp-connect 和 gulp 的 watch API 可以帮我们实现静态文件服务器和浏览器的自动刷新。


babel 编译

function babelForServer() {
  return src(
    `${dir.frontComponents}/**/*.js`,
    {since: lastRun(babelForServer)} // 跳过自上次成功完成任务以来没有更改的文件，在 watch() 模式下可增量构建
  )
    .pipe(babel({
      // 与 .babelrc 对应
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }))
    .pipe(dest(dir.nodeComponents))
}

该项任务的目的是当前端组件更新时，实时转译一份供服务器使用的版本，服务器端的 node-dev 开发工具在文件更新后自动重启 node.js 线程。这里需要使用增量构建的方式提高构建效率。对应的 babel 预设和插件根据项目实际情况使用。


以流的方式运行webpack

function runWebpack() {
  return src(dir.entry)
    .pipe(gulpWebpack(webpackConfig, webpack))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.output;
    }));
}

function watchFile() {
  // 其它监听...
  watch(`${dir.fontSrc}/**/*.js`, {events: 'all'}, series(runWebpack, replaceHashFileNames));
}

这里的任务解决思路是，以流的方式引入入口文件，使用指定版本的 webpack 作为编译器，通过 webpack-stream 按照 webpack.config.js 配置进行编译。最后记录所有输出的哈希文件名称用于替换操作。这里并没有使用 webpack 的监听，而是使用 gulp 的监听，两者是互斥的。


package.json

{
  "scripts": {
    "start": "cross-env NODE_ENV=development gulp",
    "build": "cross-env NODE_ENV=production gulp build"
  },
  "browserslist": [
    "last 2 versions",
    ">0.2%",
    "not op_mini all",
    "not dead",
    "ie 10"
  ]
}

在 package.json 中使用了cross-env实现跨平台兼容地设置 node.js 环境变量。并且添加了 browserslist，当然别忘了添加 .babelrc 文件。


完整的 Gulpfile.js

// gulp API
const {src, dest, watch, series, parallel, lastRun} = require('gulp');
// image
const imagemin = require('gulp-imagemin');
// css
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const cssmin = require('gulp-cssmin');
const rename = require('gulp-rename');
const hash = require('gulp-hash-filename');
// js
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
// clean
const clean = require('gulp-clean');
// replace
const replace = require('gulp-replace');
// babel
const babel = require('gulp-babel');
// connect
const connect = require('gulp-connect');
// webpack
const webpack = require('webpack');
const gulpWebpack = require('webpack-stream');
const webpackConfig = require('./webpack.config');

// node-sass 比 dart sass 拥有更快的编译速度
sass.compiler = require('node-sass');

// 载入 nginx 静态资源路径
const config = require('./config');
const nginxStaticResourcePath = config.nginxStaticResourcePath;

// 路径配置
const dir = {

  // html
  html: 'static/html',

  // images
  imageDev: 'static/public/images',
  imagePro: `${nginxStaticResourcePath}public/www.leeguangxing.cn/images`,

  // css
  sass: 'static/sass',
  sassCache: 'static/.sass-cache',
  cssDev: 'static/public/stylesheets',
  cssPro: `${nginxStaticResourcePath}public/www.leeguangxing.cn/stylesheets`,

  // js
  jsDev: 'static/public/javascripts',
  jsBundle: `${nginxStaticResourcePath}public/www.leeguangxing.cn/javascripts/bundle`,

  // server
  frontComponents: 'server/src/front',
  nodeComponents: 'server/src/node',

  // views
  homePage: 'server/views/front/buildHtmlPage.js',
  loginPage: 'server/views/front/loginPage.js',
  adminPage: 'server/views/admin/buildHtmlPage.js',
  adminHtml: 'admin/public/index.html',

  // webpack
  fontSrc: 'server/src/front',
  entry: 'server/src/front/index.js',
  output: `${nginxStaticResourcePath}public/www.leeguangxing.cn/javascripts/front`
};

// 哈希文件记录
let hashFileNames = [];

function connectServer() {
  connect.server({
    port: 8000,
    index: false,
    livereload: true
  });
}

function imageMin() {
  return src(
    `${dir.imageDev}/**/*.{png,jpg,gif,svg}`,
    {since: lastRun(imageMin)} // 跳过自上次成功完成任务以来没有更改的文件，在 watch() 模式下可增量构建
  )
    .pipe(imagemin())
    .pipe(dest(dir.imagePro))
    .pipe(connect.reload());
}

// options 详见 https://github.com/sass/node-sass#options
function compileSass() {
  return src([`${dir.sass}/index.scss`, `${dir.sass}/admin.scss`])
    .pipe(sourcemaps.init())
    .pipe(sass({
      outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(sourcemaps.write()) // 使用内嵌 sourcemaps
    // .pipe(sourcemaps.write('.')) // 把 sourcemaps 文件创建于输出目录下
    .pipe(dest(dir.cssDev))
    .pipe(connect.reload());
}

function cleanCss() {
  return src(`${dir.cssPro}/**/*.css`, {
    read: false // 删除文件时不读取它的内容
  })
    .pipe(clean({
      force: true // 设置允许删除工作目录以外的文件和目录cl
    }));
}

function cssMin() {
  return src([`${dir.sass}/index.scss`, `${dir.sass}/admin.scss`])
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(cssmin())
    .pipe(hash({format: "{name}.{hash:8}{ext}"}))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.cssPro;
    }));
}

function cleanJs() {
  return src(`${dir.jsBundle}/**/*.js`, {
    read: false // 删除文件时不读取它的内容
  })
    .pipe(clean({
      force: true // 设置允许删除工作目录以外的文件和目录cl
    }));
}

// options 详见 https://github.com/mishoo/UglifyJS2
function compressJs() {
  return src([`${dir.jsDev}/vendor/*.js`, `${dir.jsDev}/*.js`, `!${dir.jsDev}/**/*.min.js`])
    .pipe(uglify(
      {
        compress: {
          properties: false, // 不重写引号属性
          keep_fnames: true, // 保留函数名称
          drop_console: true, // 去除控制台输出
          keep_fargs: true // 保留函数冗余参数
        },
        output: {
          comments: false // 去掉注释
        }
      }
    ))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      return file.base;
    }));
}

function concatFrontJs() {
  return src([
    `${dir.jsDev}/vendor/jquery-3.3.1.min.js`,
    `${dir.jsDev}/vendor/bootstrap.front.min.js`,
    `${dir.jsDev}/vendor/ie10-viewport-bug-workaround.min.js`,
    `${dir.jsDev}/vendor/jquery.pagination.min.js`,
    `${dir.jsDev}/vendor/jquery.qrcode.min.js`
  ])
    .pipe(concat('front-bundle.js'))
    .pipe(hash({format: "{name}.{hash:8}{ext}"}))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.jsBundle;
    }));
}

function concatAdminJs() {
  return src([
    `${dir.jsDev}/vendor/jquery-3.3.1.min.js`,
    `${dir.jsDev}/vendor/bootstrap.admin.min.js`,
    `${dir.jsDev}/vendor/ie10-viewport-bug-workaround.min.js`,
    `${dir.jsDev}/vendor/jquery-ui.min.js`,
    `${dir.jsDev}/vendor/jquery.validate.min.js`,
    `${dir.jsDev}/vendor/icheck.min.js`,
    `${dir.jsDev}/vendor/jquery.pagination.min.js`,
    `${dir.jsDev}/login.min.js`
  ])
    .pipe(concat('admin-bundle.js'))
    .pipe(hash({format: "{name}.{hash:8}{ext}"}))
    .pipe(rename({suffix: '.min'}))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.jsBundle;
    }));
}

function babelForServer() {
  return src(
    `${dir.frontComponents}/**/*.js`,
    {since: lastRun(babelForServer)} // 跳过自上次成功完成任务以来没有更改的文件，在 watch() 模式下可增量构建
  )
    .pipe(babel({
      // 与 .babelrc 对应
      presets: ["@babel/preset-env", "@babel/preset-react"],
      plugins: ["@babel/plugin-proposal-class-properties"]
    }))
    .pipe(dest(dir.nodeComponents))
}

function replaceHashFileNames() {

  let stream = src([
    dir.homePage,
    dir.loginPage,
    dir.adminPage,
    dir.adminHtml
  ]);

  for (let i = 0; i < hashFileNames.length; i++) {
    // 根据哈希文件名生成对应规则的正则，并替换
    const currentFileName = hashFileNames[i];
    const reg = new RegExp(currentFileName.replace(
      /([a-zA-Z]+)\.[a-zA-Z0-9]+\.min\.(css|js)/,
      '$1\\.[a-zA-Z0-9]+\\.min\\.$2'), 'g');
    stream = stream.pipe(replace(reg, currentFileName));
  }

  return stream.pipe(dest(function (file) {
    return file.base;
  }));
}

function watchJs() {
  return src(`${dir.jsDev}/**/*.js`)
    .pipe(connect.reload());
}

function watchHtml() {
  return src(`${dir.html}/**/*.html`)
    .pipe(connect.reload());
}

function runWebpack() {
  return src(dir.entry)
    .pipe(gulpWebpack(webpackConfig, webpack))
    .pipe(dest(function (file) {
      hashFileNames.push(file.basename);
      return dir.output;
    }));
}

function watchFile() {
  watch(`${dir.imageDev}/**/*.{png,jpg,gif,svg}`, {events: 'all'}, imageMin);
  watch(`${dir.sass}/**/*.scss`, {events: 'all'}, compileSass);
  watch(`${dir.jsDev}/**/*.js`, {event: 'all'}, watchJs);
  watch(`${dir.html}/**/*.html`, {event: 'all'}, watchHtml);
  watch(`${dir.frontComponents}/**/*.js`, {events: 'all'}, babelForServer);
  watch(`${dir.fontSrc}/**/*.js`, {events: 'all'}, series(runWebpack, replaceHashFileNames));
}

exports.imagemin = imageMin;
exports.sass = compileSass;
exports.cssmin = series(cleanCss, cssMin, replaceHashFileNames);
exports.jsmin = compressJs;
exports.concatjs = series(cleanJs, compressJs, parallel(concatFrontJs, concatAdminJs), replaceHashFileNames);
exports.babel = babelForServer;
exports.webpack = runWebpack;
exports.build = series(
  parallel(
    imageMin,
    series(cleanCss, cssMin),
    series(cleanJs, compressJs, parallel(concatFrontJs, concatAdminJs)),
    babelForServer,
    runWebpack
  ),
  replaceHashFileNames
);
exports.default = parallel(connectServer, watchFile);
文章关键字：同构应用webpackwebpack-streamgulpgulp插件babel

版权声明：

本文为博主原创文章，若需转载，须注明出处，添加原文链接。

https://leeguangxing.cn/blog_post_69.html

寄语

当浑浊成为一种常态，清白就是一种罪恶。不在沉默中爆发，就在沉默中灭亡。

最近发表或修改

  1. CentOS7 下使用 CertBot 自动更新 Nginx SSL 证书
  2. 基于puppeteer的图片生成服务技术要点分析
  3. Windows 下的 SQLite 安装和连接调试
  4. 网络字体包压缩优化方案
  5. 在Kubernetes上部署YApi

最热文章

  1. Node.js中的IPv4地址获取
  2. 使用Grunt的grunt-contrib-imagemin插件压缩图片
  3. React类组件生命周期一览
  4. 设置重要的安全响应标头
  5. 使用redux-thunk和cross-fetch处理Redux中的异步Action
  6. 使用koa-csrf防范跨站请求伪造攻击
  7. 使用node.js的crypto库生成公私钥
  8. 使用mysqldump备份和恢复数据库
  9. VirtualBox虚拟硬盘固定大小与动态分配方式之间的转换
  10. 解决Virtualbox中no space left on device问题