一天掌握構建化工具Grunt、gulp、webpack（下）

一、gulp篇

中文主頁: http://www.gulpjs.com.cn/

上面那一篇博客咱們已經講述瞭如何建立工程以及安裝全部的環境和準備，若是沒有看到的話，連接在下面

https://my.oschina.net/mdxlcj/blog/1626534

 

接下來咱們的gulp工具，一樣也是壓縮、合併對他作測試

* 建立一個簡單的應用，目錄結構
  ```
  |- dist
  |- src
    |- js
    |- css
    |- less
  |- index.html
  |- gulpfile.js-----gulp配置文件
  |- package.json
    {
      "name": "gulp_test",
      "version": "1.0.0"
    } 

如圖所示

而後咱們編寫兩個js文件mdx1.js 和mdx2.js

而後右鍵建立gulpfile.js 這是gulp工具的特別區分標識

而後在Terminal操做腳本行命令

 全局安裝gulp  ： npm install gulp -g
  局部安裝gulp： npm install gulp --save-dev
 配置編碼: gulpfile.js
    //引入gulp模塊
    var gulp = require('gulp');
    //定義默認任務
    gulp.task('任務名', function() {
      // 將你的任務的任務代碼放在這
    });
    gulp.task('default', ['任務'])//異步執行

 

* 使用gulp插件
  * 相關插件:
    * gulp-concat : 合併文件(js/css)
    * gulp-uglify : 壓縮js文件
    * gulp-rename : 文件重命名
    * gulp-less : 編譯less
    * gulp-clean-css : 壓縮css
    * gulp-livereload : 實時自動編譯刷新
  * 重要API
    * gulp.src(filePath/pathArr) : 
      * 指向指定路徑的全部文件, 返回文件流對象
      * 用於讀取文件
    * gulp.dest(dirPath/pathArr)
      * 指向指定的全部文件夾
      * 用於向文件夾中輸出文件
    * gulp.task(name, [deps], fn) 
      * 定義一個任務
    * gulp.watch() 
      * 監視文件的變化

 

剛剛咱們建立的兩個文件夾，mdx1.js 和mdx2.js

(
    function () {
        function add(num1, num2) {
            return num1 + num2;
        }
        console.log(add(10, 20));
    }
)();

兩個js差很少

 * 下載插件:
      npm install gulp-concat gulp-uglify gulp-rename --save-dev
    * 配置編碼
 
      var concat = require('gulp-concat');
      var uglify = require('gulp-uglify');
      var rename = require('gulp-rename');
      
      gulp.task('minifyjs', function() {
          return gulp.src('src/js/*.js') //操做的源文件
              .pipe(concat('built.js')) //合併到臨時文件     
              .pipe(gulp.dest('dist/js')) //生成到目標文件夾
              .pipe(rename({suffix: '.min'})) //重命名  
              .pipe(uglify())    //壓縮
              .pipe(gulp.dest('dist/js'));
      });
      
      gulp.task('default', ['minifyjs']);

大概就這樣，可能這一篇講的很垃圾，看上一篇，你看懂上一篇這一篇應該就差很少

二、Webpack

###一、瞭解Webpack相關
    * 什麼是webpack
        * Webpack是一個模塊打包器(bundler)。
        * 在Webpack看來, 前端的全部資源文件(js/json/css/img/less/...)都會做爲模塊處理
        * 它將根據模塊的依賴關係進行靜態分析，生成對應的靜態資源
      * 理解Loader
        * Webpack 自己只能加載JS/JSON模塊，若是要加載其餘類型的文件(模塊)，就須要使用對應的loader 進行轉換/加載
        * Loader 自己也是運行在 node.js 環境中的 JavaScript 模塊
        * 它自己是一個函數，接受源文件做爲參數，返回轉換的結果
        * loader 通常以 xxx-loader 的方式命名，xxx 表明了這個 loader 要作的轉換功能，好比 json-loader。
      * 配置文件(默認)
        * webpack.config.js : 是一個node模塊，返回一個 json 格式的配置信息對象
    * 插件
        * 插件件能夠完成一些loader不能完成的功能。
        * 插件的使用通常是在 webpack 的配置信息 plugins 選項中指定。
        * CleanWebpackPlugin: 自動清除指定文件夾資源
        * HtmlWebpackPlugin: 自動生成HTML文件並
        * UglifyJSPlugin: 壓縮js文件
    
###二、學習文檔 : 
  * webpack官網: http://webpack.github.io/
  * webpack2文檔(英文): https://webpack.js.org/
  * webpack2文檔(中文): https://doc.webpack-china.org/
###三、開啓項目
  * 初始化項目：
      * 生成package.json文件
      * 
      ```   
      {
        "name": "webpack_test",
        "version": "1.0.0"
      } 
      ```
  * 安裝webpack
    - npm install webpack -g  //全局安裝
    - npm install webpack --save-dev  //局部安裝
###四、編譯打包應用
  * 建立入口src/js/ : entry.js
    - document.write("entry.js is work");
  * 建立主頁面: dist/index.html
    - <script type="text/javascript" src="bundle.js"></script>
  * 編譯js
    - webpack src/js/entry.js dist/bundle.js  
  * 查看頁面效果
###五、添加js/json文件
    * 建立第二個js: src/js/math.js
        ``` 
        export function square(x) {
          return x * x;
        }
        
        export function cube(x) {
          return x * x * x;
        }
        ```
    * 建立json文件: src/json/data.json
        ```
        {
          "name": "Tom",
          "age": 12
        }
        ```
    * 更新入口js : entry.js
        ```
        import {cube} from './math'
        import data from '../json/data.json'
        //注意data會自動被轉換爲原生的js對象或者數組
        document.write("entry.js is work <br/>");
        document.write(cube(2) + '<br/>');
        document.write(JSON.stringify(data) + '<br/>')
        ```
    * 編譯js:
        ```
        webpack src/js/entry.js dist/bundle.js
        ```
    * 查看頁面效果
###六、使用webpack配置文件
    * 建立webpack.config.js
        ```
        const path = require('path'); //path內置的模塊，用來設置路徑。
        
        module.exports = {
          entry: './src/js/entry.js',   // 入口文件
          output: {                     // 輸出配置
            filename: 'bundle.js',      // 輸出文件名
            path: path.resolve(__dirname, 'dist')   //輸出文件路徑配置
          }
        };
        ```
    * 配置npm命令: package.json
        ```
        "scripts": {
          "build": "webpack"
        },
        ```
    * 打包應用
        ```
        npm run build
        ```
###七、打包css和圖片文件
   * 安裝樣式的loader
    ```
    npm install css-loader style-loader --save-dev
    npm install file-loader url-loader --save-dev
    補充：url-loader是對象file-loader的上層封裝，使用時需配合file-loader使用。
    ```
  * 配置loader
    ```
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192      
              }
            }
          ]
        }
      ]
    }
    ```
  * 嚮應用中添加2張圖片:
    * 小圖: img/logo.png
    * 大圖: img/big.jpg
    
  * 建立樣式文件: src/css/test.css
    ```
    body {
      background: url('../img/logo.jpg')
    }
    ```
  * 更新入口js : entry.js
    - import '../css/test.css'
  * 添加css樣式

         #box1{
          width: 300px;
          height: 300px;
          background-image: url("../image/logo.jpg");
        }
        #box2{
          width: 300px;
          height: 300px;
          background-image: url("../image/big.jpg");
        }

  * index.html添加元素
  
        <div id="box1"></div>
        <div id="box2"></div>
    
  * 執行打包命令：
    ```
    npm run build
    ```
  * 發現問題：
      * 大圖沒法打包到entry.js文件中，index.html不在生成資源目錄下。
      * 頁面加載圖片會在所在目錄位置查找，致使頁面加載圖片時候大圖路徑沒法找到
      * 解決辦法：
          * 使用publicPath : 'dist/js/' //設置爲index.html提供資源的路徑,設置完後找全部的資源都會去當前目錄下找。
          * 將index.html放在dist/js/也能夠解決。
###八、自動編譯打包
    * 利用webpack開發服務器工具: webpack-dev-server
    * 下載
        - npm install --save-dev webpack-dev-server
    * webpack配置
          devServer: {
            contentBase: './dist'
          },
    * package配置
        - "start": "webpack-dev-server --open"
    * 編譯打包應用並運行
        - npm start
###九、使用webpack插件
  * 經常使用的插件
    * 使用html-webpack-plugin根據模板html生成引入script的頁面
    * 使用clean-webpack-plugin清除dist文件夾
    * 使用uglifyjs-webpack-plugin壓縮打包的js文件
  * 下載
    ```
    npm install --save-dev  html-webpack-plugin clean-webpack-plugin
    ```
  * webpack配置

        const HtmlWebpackPlugin = require('html-webpack-plugin'); //自動生成html文件的插件
        const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除以前打包的文件   
        plugins: [
          new HtmlWebpackPlugin({template: './index.html'}),
          new CleanWebpackPlugin(['dist']),
        ]

  * 建立頁面: index.html

        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>webpack test</title>
        </head>
        <body>
        <div id="app"></div>
        <!--打包文件將自動經過script標籤注入到此處-->
        </body>
        </html>

  * 打包運行項目     ```     npm run build     npm start