一天掌握构建化工具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