Grunt 新手一日入門

 

var sassStyle = 'expanded';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      output : {
        options: {
          style: sassStyle
        },
        files: {
          './style.css': './scss/style.scss'
        }
      }
    },
    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['./src/plugin.js', './src/plugin2.js'],
        dest: './global.js',
      },
    },
    uglify: {
      compressjs: {
        files: {
          './global.min.js': ['./global.js']
        }
      }
    },
    jshint: {
      all: ['./global.js']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.registerTask('outputcss',['sass']);
  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('compressjs',['concat','jshint','uglify']);
  grunt.registerTask('default');

};

其中註冊了一個 compressjs 任務 grunt.registerTask('compressjs',['concat','jshint','uglify']); 意思就是依次執行 合併、檢查、壓縮 任務。咱們把剛生成的 global.js 文件刪掉，在命令行執行 grunt compressjs 任務，結果 jshint 報錯了：

grunt 遇到錯誤就退出了，就無法繼續執行下面的任務。經過錯誤提示能夠發現，是由於 concat 裏面設置的參數——在兩個文件合併間插入一個「;」——這原本是爲了防止兩個文件之間相互干擾設置的，結果沒法被 jshint 驗證經過，咱們能夠刪掉這個參數，或者設置 jshint 驗證這兩個文件，而後再進行合併。

爲了方便，我刪掉了這個參數。再執行一下，成功了，項目目錄裏面多了 global.js 和 global.min.js 文件。

小明看到這裏，痛哭流淚，本身每次打開好幾個網站，辛苦挨個粘貼複製新建，沒想到輸入一條命令就能夠了。不過讓他更傷心的還在後面，連這些命令都不用重複輸入。

咱們能夠經過 watch 來監聽文件變更，當文件變化了（咱們編寫保存了），自動執行某些任務。此處爲了節約版面，我連自動刷新的任務一塊寫上去。根據 grunt-contrib-watch 和 grunt-contrib-connect 這倆文檔，咱們能夠寫出下面的任務：

module.exports = function(grunt) {

  var sassStyle = 'expanded';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    sass: {
      output : {
        options: {
          style: sassStyle
        },
        files: {
          './style.css': './scss/style.scss'
        }
      }
    },
    concat: {
      dist: {
        src: ['./src/plugin.js', './src/plugin2.js'],
        dest: './global.js',
      },
    },
    uglify: {
      compressjs: {
        files: {
          './global.min.js': ['./global.js']
        }
      }
    },
    jshint: {
      all: ['./global.js']
    },
    watch: {
      scripts: {
        files: ['./src/plugin.js','./src/plugin2.js'],
        tasks: ['concat','jshint','uglify']
      },
      sass: {
        files: ['./scss/style.scss'],
        tasks: ['sass']
      },
      livereload: {
          options: {
              livereload: '<%= connect.options.livereload %>'
          },
          files: [
              'index.html',
              'style.css',
              'js/global.min.js'
          ]
      }
    },
    connect: {
      options: {
          port: 9000,
          open: true,
          livereload: 35729,
          // Change this to '0.0.0.0' to access the server from outside
          hostname: 'localhost'
      },
      server: {
        options: {
          port: 9001,
          base: './'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('outputcss',['sass']);
  grunt.registerTask('concatjs',['concat']);
  grunt.registerTask('compressjs',['concat','jshint','uglify']);
  grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']);
  grunt.registerTask('default');

};

添加了 connect 任務，用來新建一個本地服務器，以當前目錄做爲服務器根目錄，而後添加 watch 任務，監聽 Scss 文件變更，若是變了，執行一下 sass 任務，監聽那倆 JS，若是變了，執行 合併、檢查、壓縮 任務，監聽 html、css、js 文件，若是變更，livereload 自動刷新打開的頁面。

而註冊的 watchit task 就是咱們的終極 task，第一次執行，先編譯 sass、再合併、檢查、壓縮、開啓服務器、監聽文件變更。咱們執行一下 grunt watchit 就能夠看到效果了，你能夠修改一下 scss 文件，把字體設置大一點，切換到瀏覽器的時候，就看到了實時刷新效果。也能夠修改一下 JS，故意改錯一下，會發現 jshint 會提示你出錯了。

看到這裏，小明和小紅相擁而泣。。。。

項目文件傳輸與協做

項目開發完成以後，每每須要 push 到 Github 或者上傳 FTP 等。或許其餘人會接手你的項目繼續開發，或者你會換臺電腦進行開發。

當小明用 git 上傳 Github 的時候，傻了眼，項目裏 node_modules 文件夾下面的東西要十幾M呢，這比我項目自己還大，上傳下載都不方便。

其實這些插件和 grunt 不須要上傳，由於有 package.json 這個文件記錄了你這個項目中依賴的 grunt 插件，你只須要上傳這個文件便可。下載下來以後，只須要在這個項目文件夾下面，輸入命令 npm install，NPM 會自動讀取 package.json 文件，將 grunt 和有關插件給你下載下來，很方便的。

也不須要在本地上傳的時候刪除，用 git 的話，能夠使用 .gitignore 文件來過濾掉這個文件夾，禁止 git 追蹤。

總結與擴展閱讀

Grunt 就是這樣一種任務自動運行器，應用好它能夠減輕不少沒必要要的人工操做，只須要專一 coding 就能夠。甚至還有Grunt 插件幫你自動完成 CSS Sprite，更多功能還須要你本身去摸索。

新手看完本文，再看一下 Grunt 官方文檔 應該沒有太多疑問了，那就再看一遍把。固然也有中文版。

除了 Grunt 以外，同類型比較火的還有 Gulp 這個工具。其實兩個東西的功能是同樣的，只不過是任務配置 JS 的語法不一樣，Gulp 的 Gulpfile.js 的寫法更加通俗易懂，上手更快。可是 Gulp 的插件等感受不如 Grunt，Grunt 官方提供了一些常見的插件，知足大部分平常工做，並且可靠值得信賴，而 Gulp 好像沒有太多官方出品，各類插件不太規範。簡單的說，Grunt 和 Gulp 就像 iPhone 與 Android 同樣，一個質量高學習難一點，一個學起來簡單可是有點那個，你懂得。

此外，能夠看一些高手的項目，你會發現更好的 Grunt 用法，好比 Yeoman 生成的項目，就有很完善的 Grunt 任務和插件，此外，jQuery 等也用 Grunt 進行打包，這些 Grunt 文件你均可以查看研究一下他們的寫法和用法，受益不淺。

最後，若是你懶得跟着文章一點點的配置示例項目，你也能夠跳轉到示例項目的 grunt 分支，這裏面是我配置好的，你須要先 npm install 而後就能夠直接執行那些命令。