關於grunt和gulp

grunt

是一套前端自動化工具，一個基於nodeJs的命令行工具，通常用於：
① 壓縮文件
② 合併文件
③ 簡單語法檢查

」自動化。對於須要反覆重複的任務，例如壓縮（minification）、編譯、單元測試、linting等，自動化工具能夠減輕你的勞動，簡化你的工做。當你在 Gruntfile 文件正確配置好了任務，任務運行器就會自動幫你或你的小組完成大部分無聊的工做。」

Grunt 基於 Node.js ，用 JS 開發，這樣就能夠藉助 Node.js 實現跨系統跨平臺的桌面端的操做，例如文件操做等等。此外，Grunt 以及它的插件們，都做爲一個 包 ，能夠用 NPM 安裝進行管理。因此 NPM 生成的 package.json 項目文件，裏面能夠記錄當前項目中用到的 Grunt 插件，而 Grunt 會調用 Gruntfile.js 這個文件，解析裏面的任務（task）並執行相應操做。

安裝

有了nodeJs環境後（也就是得先安裝nodejs），即可以開始搞grunt了，由於咱們可能在任何目錄下運行打包程序，因此咱們須要安裝CLI
官方推薦在全局安裝CLI（grunt的命令行接口），在命令行輸入：

npm install -g grunt-cli

（這條命令將會把grunt命令植入系統路徑，這樣就能在任意目錄運行他，緣由是每次運行grunt時，它都會使用node的require查找本地是否安裝grunt，若是找到CLI便加載這個本地grunt庫 而後應用咱們項目中的GruntFile配置，並執行任務）

接下來：生成 package.json 文件

能夠去網上找找（複製粘貼）這個 package.json 文件實際上是 Node.js 來描述一個項目的文件，JSON 格式。生成這個文件超級簡單，推薦用命令行交互式的生成一下：在項目文件下 npm init

也能夠本身模仿寫：

 

{   "name": "demo",  

"file": "zepto",

  "version": "0.1.0",  

"description": "demo",  

"license": "MIT",

"devDependencies": {   "grunt": "~0.4.1",   "grunt-contrib-jshint": "~0.6.3",   "grunt-contrib-concat": "~0.3.0",   "grunt-contrib-uglify": "~0.2.1",   "grunt-contrib-requirejs": "~0.4.1",   "grunt-contrib-copy": "~0.4.1",   "grunt-contrib-clean": "~0.5.0",   "grunt-strip": "~0.2.1" }, "devDependencies": {     "grunt": "~0.4.1",     "grunt-contrib-jshint": "~0.6.3",     "grunt-contrib-uglify": "~0.2.1",     "grunt-contrib-requirejs": "~0.4.1",   

  "grunt-contrib-copy": "~0.4.1",     "grunt-contrib-clean": "~0.5.0",     "grunt-strip": "~0.2.1"   },

 "dependencies": {     "express": "3.x"   }

}

安裝 Grunt 和所須要的插件

.合併文件：grunt-contrib-concat

• 語法檢查：grunt-contrib-jshint
• Scss 編譯：grunt-contrib-sass
• 壓縮文件：grunt-contrib-uglify
• 監聽文件變更：grunt-contrib-watch
• 創建本地服務器：grunt-contrib-connect

在項目文件根目錄上：

表示經過 npm 安裝了 grunt 到當前項目，同時加上了 –save-dev 參數，表示會把剛安裝的東西添加到 package.json 文件中。可打開 package.json 文件看下，是否是多了npm install grunt --save-dev

"devDependencies": {
  "grunt": "^0.4.5"
}
命令行輸入如下安裝插件

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

配置 Gruntfile.js 的語法

這個文件尤爲關鍵，他通常幹兩件事情：

① 讀取package信息

② 插件加載、註冊任務，運行任務（grunt對外的接口所有寫在這裏面）

Gruntfile通常由四個部分組成 ① 包裝函數 這個包裝函數沒什麼東西，意思就是咱們全部的代碼必須放到這個函數裏面

module.exports = function (grunt) {
//你的代碼
}

接下來任務配置代碼、插件加載代碼、任務註冊代碼。

這三塊代碼，任務配置代碼就是調用插件配置一下要執行的任務和實現的功能，插件加載代碼就是把須要用到的插件加載進來，任務註冊代碼就是註冊一個 task，裏面包含剛在前面編寫的任務配置代碼。

 

grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    },
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

插件加載代碼（還有其餘插件不作介紹如watch （http://www.cnblogs.com/haogj/p/4785288.html）

 grunt.loadNpmTasks('grunt-contrib-uglify');（壓縮）

  grunt.loadNpmTasks('grunt-contrib-concat');（合併）

任務註冊代碼

 grunt.registerTask('default', ['uglify'，'uglify']);

module.exports = function (grunt) {
  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%=pkg.file %>.js',
        dest: 'dest/<%= pkg.file %>.min.js'
      }
    }
  });
  // 加載提供"uglify"任務的插件
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默認任務
  grunt.registerTask('default', ['uglify']);
}
最後命令行輸入
grunt 
也就是最後配置結果代碼爲

參考：http://www.cnblogs.com/yexiaochai/p/3603389.html

http://gruntjs.com/getting-started

仍是初學，等之後再深刻了解grunt吧

gulp

gulp是基於Nodejs的自動任務運行器，它能自動化的完成js/coffee/less/html/image/css等文件的測試，檢查，合併，壓縮，格式化，瀏覽器自動刷新，部署文件生成，並監聽文件在改動後重復指定這些步驟。在實現上，它借鑑來了Unix操做系統的管道（pipe）思想，前一級輸出，直接變成後一級的輸入，使得在操做上很是簡單。gulp和grunt很是相似，但相比於grunt的頻繁IO操做，gulo的操做就更快寫了

如今開始安裝：

npm install -g gulp（首先確保已經正確安裝nodejs環境，而後以全局的方式安裝gulp）

基於本身建的項目文件下 npm install --save-dev gulp(全局安裝完後，本身要用到gulp的每個項目都要單獨安裝一次，也就是所謂的局部安裝)

【全局安裝gulp是爲了執行gulp任務，項目也安裝gulp是爲了調用gulp插件功能】

自動生成package.json:npm init(基於項目文件根目錄)

安裝依賴：npm install gulp-uglify --save-dev(即使本地系統裏面沒有，則命令運行後便裝到了本身項目的依賴裏 package.json中)其餘插件類比便可

在本身的項目文件中創建gulpfile.js

var gulp=require（'gulp'）;//引入gulp

var uglify=require('gulp-uglify');//

var concat=require('gulp-concat');

var paths={

script:['js/index.js','js/main/js']//(項目文件js中的兩個文件)

}

gulp.task('default',function(){

gulp.src(paths)

.pipe(uglify())

.pipe(concat('all.min.js'))

.pipe(gulp.dest('build'));

});

最後：運行 gulp;

關於自動加載插件

npm install --save-dev gulp-load-plugins

流式開發的gulp 本人還有待學習