Grunt入門-壓縮合並js或css

網絡上看了不少的Grunt教程，以爲都看得只知其一;不知其二，以爲本身也有必要寫一點東西，只看成是加深本身的理解。

1,全局安裝Grunt

npm install -g grunt-cli //全局安裝命令就不用我多說了

2,新建項目Grunt，安裝項目依賴環境

npm install 
這個呢，必定要在安裝在項目文件夾下面
若是你用的webstorm那麼直接選中項目打開下面的命令行工具就能夠了
不然就本身cd 命令切換過去再安裝吧。

備註：有人說執行命令沒有反應，爲何呢，由於沒有package.json啊，
把下面的json文件複製一份到項目裏，注意名字不要修改

步子太大容易那啥，扯着蛋，我之因此以爲大部分都看得只知其一;不知其二我以爲是有緣由的，一瞬間接受太多的東西了，因此呢，我們就一步一步來，先從最基本的開始。

要說最基本的就要從需求開始，如今就定一個最基本的需求，
項目裏面有幾個js文件須要合併、壓縮，
如今呢，就先實現一個快捷鍵壓縮合並js的功能吧。
（誰讓我是懶人呢，懶人就要用快捷鍵）
{*全自動實時壓縮的人請無視我*}

3,要想壓縮合並js文件，就要讓項目知道你要壓縮合並哪幾個js文件，
而且知道壓縮合並以後放在哪裏

這裏新建一個Gruntfile.js(注意名字，要如出一轍，暫時不要考慮爲何),其它的看備註吧，簡直不能更詳細

module.exports = function (grunt) {//全部的代碼必須放在這個裏面
    // 項目配置
    grunt.initConfig({//初始化配置
        pkg: grunt.file.readJSON('package.json'),//讀取json文件配置信息
        uglify: {//方法名，看最後一行代碼就明白了
            options: {//文件的一些描述信息，可按需配置
                banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                //須要壓縮合並的文件目錄src,後面拼接的是上面json文件中file字段
                src: 'src/<%=pkg.file %>.js',//注意，這裏能夠是數組，寫在json中效果更好哦
                //多個文件
                //src: ['src/backbone.js', 'src/underscore.js'],
                //也能夠
                //src: ['src/<%=pkg.file %>.js', 'src/<%=pkg.file1 %>.js'],
                //壓縮合並後放置的文件目錄dest
                dest: 'dest/<%= pkg.file %>.min.js'
            }
        }
    });
    // 加載提供"uglify"任務的插件 //調用壓縮合並功能須要的模塊
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 添加默認任務//默認任務是壓縮合並
    grunt.registerTask('default', ['uglify']);
}

OK， js看完了，固然裏面還有不少能夠了解的，這個就須要看API等等了，
而後，看看下面須要的json吧

{
  "name": "demo",
  "file": "lib",
  "version": "0.1.0",
  "description": "grunt start guide @oospace ",
  "license": "MIT",
  "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"
  }
}

這個就不加備註了，一個json文件而已，單詞不認識的本身翻譯一下，

注意，這裏的依賴devDependencies，就是執行npm install 會自動安裝的東西

**

上面的是壓縮js的，下面就放一個壓縮css的例子吧，還能再學點什麼,
發散一下思惟，這裏若是是less文件怎麼辦？

module.exports = function (grunt) {
  grunt.initConfig({
  concat: {//css文件合併
    css: {
      src: ['src/css/*.css'],//當前grunt項目中路徑下的src/css目錄下的全部css文件
      dest: 'dist/all.css'  //生成到grunt項目路徑下的dist文件夾下爲all.css
    }
  },
  cssmin: { //css文件壓縮
     css: {
        src: 'dist/all.css',//將以前的all.css
        dest: 'dist/all.min.css'  //壓縮
      }
   }
});
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-concat');
  
  grunt.registerTask('default', ['concat','cssmin']);
}

4,到了這裏，已經能夠實現咱們最初的目的了，在命令行切換到項目文件夾裏

grunt //該命令會執行你定義的默認命令（上面的default）

grunt <name> //加上你定義的命令的名字，忽略尖括號，執行對應的命令

5,至於說好的快捷鍵執行命令，請參考：
webstorm和node配合使用的一些小技巧之External tools