JavaScript自動化構建工具入門----grunt、gulp、webpack

 蠻荒時代的程序員：

作項目的時候，會有大量的js 大量的css   須要合併壓縮，大量時間須要用到合併壓縮

在前端開發中會出現不少重複性無心義的勞動 

自動化時代的程序員：

但願一切均可以自動完成 

安裝 經常使用插件、壓縮插件、合併插件等。  用插件實現 功能無限擴展  

 

---

• 簡單介紹三種工具

grunt 是js任務管理工具（自動化構建工具）    --  Grunt官網 戳這裏

優點：出來早 社區成熟  插件全  

缺點：配置複雜   效率低 （cpu佔用率高） 

-------------------------------------------------------------------------

gulp 基於流的自動化構建工具     --  Gulp官網 戳這裏

優勢：配置簡單 效率高 流式工做（一個任務 的輸出做爲另外一個任務的輸入）  優勢正好是grunt缺點

缺點：出現晚  插件少

-------------------------------------------------------------------------

webpack 模塊打包機    --  webpack官網 戳這裏

優勢：模塊化 

缺點：配置複雜

• 安裝node.js及npm

              grunt、gulp、webpack這三種自動化構建工具都依賴node.js環境，因此咱們須要先安裝node  -- node官網 戳這裏

              node.js 不只是 服務器端js運行環境 還有 大工具包(npm)，前端用npm構建前端的開發環境，爲了實現 自動化構建及項目管理

       node.js 安裝教程 戳這裏  或者 移步度娘

//查看node版本
node -v
//查看npm版本
npm -v

node.js   包分類:

1.全局包:全局環境下使用，能夠在命令行任何目錄下使用（-g）   在全部項目都用的狀況下  

2.本地包:本地工程使用的包   某個項目須要用

 

安裝全局包cnpm

因爲npm提供的包是在國外的服務器上，下載速度不能保證。

因此實際使用中可使用淘寶提供的，cnpm國內鏡像（10分鐘更新）,下載速度快。    

在網絡狀態很差的狀況下使用cnpm

安裝步驟:

//1.關閉npmssl嚴格認證  
npmconfig set strict-ssl false
//2.安裝cnpm   -g全局包  
npm install -g cnpm --registry-https://registry.npm.taobao.org/

• grunt

grunt構建大致步驟：

在你的工程中，安裝grunt本地安裝   >   建立各類目錄 less  js min buid  >    配置Gruntfile.js,grunt的配置文件  >  ok

實際開發中每一個工程中 grunt版本不同，想在全部目錄中都能直接執行grunt命令

解決方法：

只全局註冊grunt命令CLI（不安裝對應的全局包，優點：在任何目錄下均可以輸入grunt命令，但不會有任何效果）  

而後在各個工程下安裝本地包

 

grunt構建具體步驟：

//安裝全局grunt命令CLI 在任何目錄下均可以使用grunt命令只不過沒法執行
//
npm install -g grunt-cli 
//建立工程目錄
mkdir 目錄名
//切換到當前目錄 
cd  目錄名
//初始化工程
npm init    
//安裝本地grunt安裝包  
//目的：多個版本能夠在電腦上共存
npm install grunt --save-dev
//建立Gruntfile.js文件，用來配置或定義任務（task）並加載Grunt插件
//下面單獨說 Gruntfile.js文件 的配置
//安裝各類grunt插件    --參考方官
 grunt-contrib-less       less編譯
 grunt-contrib-cssmin  css壓縮
 grunt-contrib-uglify    js壓縮
 grunt-contrib-concat   合併
 grunt-contrib-watch    監控
//執行任務task            
grunt

關於Gruntfile.js文件配置：

Gruntfile.js文件配置須要和文件目錄相結合，下面是個模板的文件tree ：

│  Gruntfile.js
│  package.json
│  
├─node_modules
│              
└─src
    ├─concat
    ├─css
    │  └─min
    ├─js
    │  └─min
    └─less

下面是Gruntfile.js文件配置：

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    less:{
      development:{
        files:[{
          expand:true,
          cwd:'src/less',
          src:['*.less'],
          dest:'src/css',
          ext:'.css'
         }]
       }
      },
      cssmin:{
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      static_mappings:{
        files:[
            {
              expand:true,
              cwd:'src/css',
              src:'*.css',
              dest:'src/css/min',
              ext:'.min.css'
            }
        ]
      }
    },
     uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      static_mappings:{
        files:[
            {
              expand:true,
              cwd:'src/js',
              src:'*.js',
              dest:'src/js/min',
              ext:'.min.js'
            }
        ]
      }
    },
     concat:{
      //壓縮合並的 js 和css
      distjs:{
        src:['src/js/min/*.js'],
        dest:'src/concat/all.js'
      },
      
      distcss:{
        src:['src/css/min/*.css'],
        dest:'src/concat/all.css'
      }
    },
    watch:{
      //監控文件變化並執行相應任務
      files:['src/**/*.*'],
      tasks:['less','cssmin','uglify','concat']
    }
  });
   
 
  // 加載包含 "less" 任務的插件,less編譯成css。
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['less','cssmin','uglify','concat','watch']);

};

• gulp

//建立工程目錄
mkdir 目錄名
//切換到當前目錄 
cd  目錄名
//初始化工程進行配置文件
npm init    
//安裝gulp
//註冊全局 gulp
  npm install –g gulp
//安裝本地gulp
  npm install gulp --save-dev
//建立grunt配置文件gulpfile.js   粘過去
//建立build 和 src原文件（css js less在 js 文件夾內建立min文件）
//安裝插件    自帶watch
  npm install gulp-less --save-dev  
  npm install gulp-concat --save-dev  （js  css都合併）
  npm install gulp-uglify --save-dev
  npm install gulp-minify-css --save-dev
//執行
gulp

• webpack

//全局安裝webpack
npm install webpack -g
//在項目中安裝 webpack
// 初始化 package.json,  根據提示填寫 package.json 的相關信息
npm init
// 將 webpack 依賴添加到package.json 
npm install webpack --save-dev
//Develop Server 工具 （可選）
npm install webpack-dev-server --save-dev