前端自動化開發之grunt

上篇文章介紹了前端模塊化開發工具seaJs，利用seaJs我們可以輕松實現前端的模塊化編程，參見http://www.cnblogs.com/luozhihao/p/4818782.html

那么今天我繼續介紹前端開發的另一工具——grunt。關於介紹grunt文章網上已經存在很多，而本文主要結合自己的親身實踐來講解利用grunt實現前端開發中代碼的壓縮及合並。

一、准備工作

再使用grunt之前，我們先要安裝node.js，利用node的包管理工具npm來安裝grunt

node.js下載地址：https://nodejs.org/en/

關於如何安裝及配置node不屬於本文涉及范疇，所以在這里不做介紹，需要查看的童鞋可以參照：http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

 

二、安裝grunt

安裝配置完node后，我們利用npm來安裝全局grunt，命令行如下：

 

完成后我們輸入命令：grunt -ver 來查看grunt的版本，如果現實版本信息，則說明安裝成功了：

 

ok，下一步是在你自己的項目文件中局部安裝grunt

安裝之前先在項目目錄下新建兩個文件Gruntfile.js及package.json用來配置grunt

在package.json中將如下代碼粘貼進去並保存：

{
  "name": "luozh",
  "file": "zepto",
  "version": "0.1.0",
  "description": "demo",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.1",
    "grunt-contrib-cssmin": "~0.12.3",
    "grunt-strip": "~0.2.1"
  },
  "dependencies": {
    "express": "3.x"
  }
}

完了之后，我們在package.json的同級目錄下輸入命令行npm install：

之后我們會看到文件夾下又多了一個名為node_modules的文件夾

沒錯，里面放置的就是剛剛我們package.json里所配置的功能文件了。

ok，到了這里我們的grunt的安裝就到此結束。

 

三、配置grunt

安裝完成之后，我們需要對我們需要利用grunt實現的功能進行配置，比如我們需要調用哪些功能、文件原始路徑、文件名及存放路徑等。

這里我們就要用到剛剛提到的Gruntfile.js文件了，下面以配置壓縮js功能為例：

module.exports = function (grunt) {
  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
        options : {
            banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
         my_target: {
            files: [
                {
                    expand: true,
                    //src相對路徑 對dest無用
                    cwd: 'app/src/',
                    //src: '*.js',
                    src: ['demo.js', 'untils.js'],  //不包含某個js,某個文件夾下的js
                    dest: 'app/src/dist/',  //最后/不能省略
                    rename: function (dest, src) {  
                              var folder = src.substring(0, src.lastIndexOf('/'));  
                              var filename = src.substring(src.lastIndexOf('/'), src.length);  
                              //  var filename=src;  
                              filename = filename.substring(0, filename.lastIndexOf('.'));  
                              var fileresult=dest + folder + filename + '.min.js';  
                              grunt.log.writeln("現處理文件："+src+"  處理后文件："+fileresult);  

                              return fileresult;  
                              //return  filename + '.min.js';  
                          } 
                }
            ]
        }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默認任務
  grunt.registerTask('default', ['uglify']);
}

以上需要修改的是：

cwd: 'app/src/' 改成你需要壓縮js的目錄

src: ['demo.js', 'untils.js'] 改成你需要壓縮的js文件名，多個以數組形式存放

dest: 'app/src/dist/' 改成你所要輸出壓縮后js的文件目錄

配置完成后找到自己所要壓縮文件的目錄，執行命令：grunt uglify就ok了

顯示Done, without errors 就表示壓縮成功

同理，我們還可以合並js，配置如下：

module.exports = function (grunt) {
  // 項目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        
      },
      dist: {
        src: ['app/src/demo.js', 'app/src/untils.js'],
        dest: 'app/src/dist/libs.js'
      }
    },
    uglify: {
        options : {
            banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
        },
         my_target: {
            files: [
                {
                    expand: true,
                    //src相對路徑 對dest無用
                    cwd: 'app/src/',
                    //src: '*.js',
                    src: ['demo.js', 'untils.js'],  //不包含某個js,某個文件夾下的js
                    dest: 'app/src/dist/',  //最后/不能省略
                    rename: function (dest, src) {  
                              var folder = src.substring(0, src.lastIndexOf('/'));  
                              var filename = src.substring(src.lastIndexOf('/'), src.length);  
                              //  var filename=src;  
                              filename = filename.substring(0, filename.lastIndexOf('.'));  
                              var fileresult=dest + folder + filename + '.min.js';  
                              grunt.log.writeln("現處理文件："+src+"  處理后文件："+fileresult);  

                              return fileresult;  
                              //return  filename + '.min.js';  
                          } 
                }
            ]
        }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  // 默認任務
  grunt.registerTask('default', ['uglify', 'concat']);
}

添加了concat配置，利用grunt.loadNpmTasks('grunt-contrib-concat')將concat功能load進來，並包含到grunt.registerTask任務中去，

如果沒有這一功能需要進行下載，同時需要在package.json進行配置，

最后執行grunt concat就ok了，如果需要同時進行壓縮和合並，那么執行命令grunt就ok了~

當然，grunt除了能實現js壓縮合並外，還能實現css壓縮、圖片壓縮等等一系列功能，在這里就不一一介紹了，

所有功能的實現都需要事先安裝及配置后才能使用，

關於其他功能插件的安裝及配置方法可以參見grunt官網的插件列表 http://www.gruntjs.net/plugins

 

可以說利用grunt減輕了我們對於需要反復重復的任務，例如壓縮（minification）、編譯、單元測試、linting等方面的工作量，像grunt這樣的前端自動化工具還有很多，比如gulp，

同時結合yeomen、bower等前端工具可以實現更為強大的自動化流程，讓前端得以工程化。

 

之后我會介紹yeomen、bower、grunt相結合的自動化構建方法，歡迎關注。