Grunt,Gulp,Webpack自动化构建工具

发表于 | 分类于 |
字数统计: 1.8k | 阅读时长 ≈ 7

一.Grunt

使用插件进行处理 比如grunt-contrib-concat（进行js合并），grunt-contrib-uglify（进行js压缩），grunt-contrib-jshint（js语法检查），grunt-contrib-cssmin（对css任务进行合并压缩），grunt-contrib-watch（对任务进行监视）
插件使用步骤：
先下载npm install grunt-contrib-concat –save-dev
复制代码到Gruntfile.js
执行grunt concat(或者多个命令的时候，都写在默认任务中，使用grunt一次执行)

在使用watch的时候 

1
2
grunt.registerTask('default', ['concat','uglify','jshint']);
grunt.registerTask('myWatch',['watch']);

在进行代码监视的时候执行grunt myWatch
在打包上线的时候执行 grunt

执行的时候，grunt执行任务是同步的。注意顺序问题

二.Gulp

1.任务化
2.基于数据流
3.可以异步多任务，也可以同步

使用的套路一样，先配置好packsge.json,然后npm install gulp –save-dev进行局部安装 

1
2
3
4
5
6
7
8
9
gulp-concat //合并js文件
gulp-less //对less进行编译  
gulp-clean-css //合并压缩css文件
gulp-htmlmin  //压缩html的任务
gulp-livereload //自动编译监视---半自动
gulp-connect    //热加载（实时加载）
open //自动打开指定的链接
gulp-load-plugins  //
//引入  var $ = require('gulp-load-plugins')()  相当于function

插件使用套路一样：
下载npm install gulp-concat gulp-uglify gulp-rename –save-dev
gulpfile.js里的gulp.task不写return时为同步任务，写了return就是异步任务

less可以指定变量跟函数

三.webpack

四个核心概念：入口，输出，loader，插件
模块打包器（bundler）

强制删除shift+del

  • 打包方式

    • 1.创建一个bundle文件,使用cli的方式
      要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：npm install --save lodash
      然后在index.js中引入lodash,绑定它为_
      import _ from ‘lodash’
      最后在index.html中引入bundle.js
      执行npx webpack,会将我们的脚本作为入口，然后输出为main.js

    • 2.使用一个配置文件，webpack.config.js
      这比在终端(terminal)中手动输入大量命令要高效的多

      1
      2
      3
      4
      5
      6
      7
      8
      9
      //webpack.config.js
      const path = require('path');

      module.exports = {
        entry: './src/index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist')
        }};

      使用npx webpack –config webpack.config.js

      • 3.使用npm脚本
        考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        //package.json
        {
            "name": "webpack-demo",
            "version": "1.0.0",
            "description": "",
            "main": "index.js",
            "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1",
        +     "build": "webpack"
            },
            "keywords": [],
            "author": "",
            "license": "ISC",
            "devDependencies": {
              "webpack": "^4.0.1",
              "webpack-cli": "^2.0.9",
              "lodash": "^4.17.5"
            }
          }
        现在就可以使用npm run build命令，来代替之前的npx命令
        输入npm run build即可

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。

但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用HtmlWebpackPlugin来解决这个问题。

在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。clean-webpack-plugin 是一个比较普及的管理插件

为了更容易地追踪错误和警告，JavaScript 提供了 *source map *功能，将编译后的代码映射回原始源代码。

1.开发模式

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：
webpack’s Watch Mode
webpack-dev-server
webpack-dev-middleware
多数场景中，你可能需要使用 webpack-dev-server()

  • webpack’s Watch Mode观察者模式
    在命令行中运行npm run watch就会看到webpack编译代码，然而却不会退出命令行
    在观察的同时，修改文件，保存文件并检查中断窗口，就可以看到webpack自动重新编译后的模块
    缺点是，为了看到修改后的实际效果，需要刷新浏览器

  • webpack-dev-server
    提供一个简单的web服务器，能够实时重新加载（live reloading），存放到dev-server的虚拟内存中，删掉dist下的js都照样可以正常显示
    npm install –save-dev webpack-dev-server
    修改配置文件webpack.config.js，告诉开发服务器去哪查找文件，添加

    1
    2
    3
    devServer: {
        contentBase: './dist'
    },

    在package.json中的scripts中添加：”start”:”webpack-dev-server –open”

现在运行npm start 就会看到浏览器自动加载页面，修改文件的话，web服务器就会自动重新加载编译后的代码

  • webpack-dev-middleware
    webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求

HMR
hot module replacement模式热替换

2.tree shaking

通过如上方式，我们已经可以通过 import 和 export 语法，找出那些需要删除的“未使用代码(dead code)”，然而，我们不只是要找出，还需要在 bundle 中删除它们。为此，我们将使用 -p(production) 这个 webpack 编译标记，来启用 uglifyjs 压缩插件。

注意，–optimize-minimize 标记也会在 webpack 内部调用 UglifyJsPlugin。压缩输出

3.source map

对于本指南，我们将在生产环境中使用 source-map 选项，而不是我们在开发环境中用到的 inline-source-map：
避免在生产中使用 inline-*** 和 eval-，因为它们可以增加 bundle 大小，并降低整体性能。

4.代码分离

有三种常用的代码分离方法：

  • 入口起点：使用 entry 配置手动地分离代码。
  • 防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。
  • 动态导入：通过模块的内联函数调用来分离代码。

一些对于代码分离很有帮助的插件和 loaders：

  • ExtractTextPlugin: 用于将 CSS 从主应用程序中分离。
  • bundle-loader: 用于分离代码和延迟加载生成的 bundle。
  • promise-loader: 类似于 bundle-loader ，但是使用的是 promises

CommonsChunkPlugin 插件还可以通过使用显式的 vendor chunks 功能，从应用程序代码中分离 vendor 模块。

第一个插件是 NamedModulesPlugin，将使用模块的路径，而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性，然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin，推荐用于生产环境构建

5.loader

  • css-loader
  • style-loader
  • file-loader
  • url-loader

在你的应用程序中，有三种使用 loader 的方式：
配置（推荐）：在 webpack.config.js 文件中指定 loader。
内联：在每个 import 语句中显式指定 loader。
CLI：在 shell 命令中指定它们。

6.plugin

  • HTMLWebpackPlugin({template:’./index.html’}) 根据模板页面生成新的页面
  • clean-webpack-plugin（[‘dist’]） 构建前请理dist文件夹