一: 前端工程化的价值

工程化不等于工具,它是为解决问题而提出的技术方案,工程化的核心是整体项目的规划或者架构,工具只是落地或者实现的手段.

  1. 传统语言或语法的弊端.
  2. 无法使用模块化,组件化.
  3. 重复的机械式工作.
  4. 依赖后端服务的支持.
  5. 代码风格统一,质量保证.

二: 使用Gulp完成项目的自动化构建

Gulp自动化构建包目录:
|-jrg-pages ————————————包文件夹
|-bin ——————————————包的入口文件夹
|-jrg-pages.js
|-lib ——————————————-自动化构建入口文件夹
|-index.js
|-package.json
|-yarn.lock
|-.gitignore

  1. // 自动化构建目录 lib/index.js 代码
  3. // 引入gulp相关模块
  4. const { 
  5.   src,
  6.   dest,
  7.   parallel,
  8.   series,
  9.   watch
  10. } = require("gulp");
  12. // 统一管理gulp插件
  13. const loadPlugins = require("gulp-load-plugins");
  14. const plugins = loadPlugins();
  16. // 热更新
  17. const browseSync = require("browser-sync");
  18. const bs = browseSync.create();
  19. const del = require("del");
  21. // 获取命令行当前目录
  22. const cwd = process.cwd();
  24. /**
  25.  * 常用插件:
  26.  * gulp-sass 
  27.  * gulp-babel @babel/core @babel/preset-env
  28.  * gulp-swig 
  29.  * gulp-imagemin 
  30.  * del 
  31.  * gulp-load-plugins 
  32.  * browser-sync 
  33.  * gulp-useref 
  34.  * gulp-htmlmin  // 压缩html
  35.  * gulp-uglify // 压缩js
  36.  * gulp-if 
  37.  * gulp-clean-css // 压缩css
  38.  */
  41. // 默认配置文件
  42. let config = {
  43.   build: {
  44.     src: "src",
  45.     dist: "dist",
  46.     templates: "templates",
  47.     public: "public",
  48.     paths: {
  49.       styles: "assets/styles/*.scss",
  50.       scripts: "assets/scripts/*.js",
  51.       pages: "*.html",
  52.       images: "assets/images/**",
  53.       fonts: "assets/fonts/**"
  54.     }
  55.   }
  56. }
  58. try {
  59.   const loadConfig = require(`${cwd}/pages.config.js`);
  60.   config = Object.assign({}, config, loadConfig);
  61. } catch (error) {
  62.   console.log(error)
  63. }
  65. // 结构默认配置文件
  66. const { build } = config; 
  67. const { 
  68.   paths,
  69.   dist, 
  70.   templates, 
  71.   public 
  72. } = build;
  73. const { styles, scripts, pages, images, fonts } = paths;
  76. // 样式处理 任务
  77. const style = () => {
  78.   return src(
  79.     styles,  
  80.     {
  81.       sourcemaps: true, 
  82.       base: build.src,
  83.       cwd: build.src
  84.     })
  85.     .pipe(plugins.sass({ outputStyle:"expanded" }))
  86.     .pipe(dest(templates))
  87.     .pipe(bs.reload({ stream: true }))
  88. } 
  90. // js处理 任务
  91. const script = () => {
  92.   return src(scripts, { base: build.src, cwd: build.src })
  93.     .pipe(plugins.babel({ presets: [require("@babel/preset-env")] }))
  94.     .pipe(dest(templates))
  95.     .pipe(bs.reload({ stream: true }))
  96. }
  98. // html文件处理 任务
  99. const page = () => {
  100.   return src(pages, { base: build.src, cwd: build.src })
  101.     .pipe(plugins.swig({ data: config.data, defaults: { cache: false } }))
  102.     .pipe(dest(templates))
  103.     .pipe(bs.reload({ stream: true }))
  104. }
  106. // image, font, build下的文件,直接拷贝到dist目录,不用temp作为中转 任务
  107. const image = () => {
  108.   return src(images, { base: build.src, cwd: build.src })
  109.     .pipe(plugins.imagemin())
  110.     .pipe(dest(dist))
  111. }
  113. // 字体文件处理 任务
  114. const font = () => {
  115.   return src(fonts, { base: build.src, cwd: build.src })
  116.     .pipe(plugins.imagemin())
  117.     .pipe(dest(dist))
  118. }
  120. // public下的文件直接拷贝过去
  121. const extra = () => {
  122.   return src(
  123.     "**", 
  124.     { 
  125.       base: public, 
  126.       cwd: public 
  127.     })
  128.     .pipe(dest(dist))
  129. }
  131. // 清除任务
  132. const clean = () => {
  133.   return del([dist, templates]);
  134. }
  136. // 压缩处理任务
  137. const useref = () => {
  138.   return src(
  139.     pages, 
  140.     { 
  141.       base: templates, 
  142.       cwd: templates 
  143.     })
  144.     .pipe(plugins.useref({ searchPath: [templates, "."] }))
  145.     // 压缩处理js, html, css
  146.     .pipe(plugins.if(/\.js$/, plugins.uglify()))
  147.     .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  148.     .pipe(plugins.if(/\.html$/, plugins.htmlmin({
  149.       collapseWhitespace: true,
  150.       minifyCSS: true,
  151.       minifyJS: true
  152.     })))
  153.     .pipe(dest(dist))
  154. }
  156. // 热更新任务
  157. const serve = () => {
  158.   // 监听文件的变化, 两个参数,第一个参数是文件路径,第二个参数处理任务的函数
  159.   watch(styles,{ cwd: build.src }, style)
  160.   watch(scripts, { cwd: build.src }, script)
  161.   watch(pages,{ cwd: build.src }, page)
  162.   watch([
  163.     images,
  164.     fonts
  165.   ], { cwd: build.src },  bs.reload)
  166.   watch("**",{ cwd: public }, bs.reload)
  168.   bs.init({
  169.     notify: false,
  170.     port: 8888,
  171.     server: {
  172.       baseDir: [templates, dist, public],
  173.       routes: {
  174.         "/node_modules": "node_modules"
  175.       }
  176.     }
  177.   })
  178. }
  180. // 编译任务
  181. const compile = parallel(style, script, page);
  183. // builds任务
  184. const builds = series(
  185.   clean, 
  186.   parallel(
  187.     series(compile, useref), 
  188.     image, 
  189.     font, 
  190.     extra
  191.   )
  192. );
  194. // 本地开发任务
  195. const dev = series(compile, serve)
  197. module.exports = {
  198.   clean,
  199.   builds,
  200.   dev,
  201. }
  1. // bin/jrg-pages.js 文件代码
  2. #!/usr/bin/env node
  4. process.argv.push("--cwd");
  5. process.argv.push(process.cwd());
  6. process.argv.push("--gulpfile");
  7. process.argv.push(require.resolve(".."));
  9. require("gulp/bin/gulp");
  1. // package.json 说明
  2. // 1: 插件都放入dependencies依赖中
  3. // 2: 增加: "files": [ "lib", "bin" ],
  4. // 3: 增加: "bin": "bin/jrg-pages.js",
  5. // 4: 增加: "main": "lib/index.js",