cli 簡單 cpu占用率高 mini tco get %20 pan 情況

蠻荒時代的程序員：

做項目的時候，會有大量的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

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