grunt 0.4.1構建工具入門實踐

本文轉載自查看原文 2013-04-02 14:18 1803 grunt/ 構建工具/ 前端

由於最近的食美特項目需要對css文件和js文件進行壓縮，各種比較之后，選擇了grunt進行構建。google一下，幾乎都是grunt0.3的使用說明，按照說明，幾乎無法使用。查看gruntjs的入門 Getting started，又是雲里霧里的，好吧，只能耐心看文檔和不斷的實踐吧。

一、使用環境說明：

1、在window xp 下使用

2、命令行使用的git的客戶端 msysgit 1.7.6(類似的nodejs應用，使用類linux的命令行比較好)

3、只是入門說明，目的是快速的搭建環境，示例能夠跑起來。詳細的文檔資料請參考gruntjs，

一、nodejs安裝

進入 http://nodejs.org/ 直接點擊 INSTALL，直接安裝。（windows 下安裝nodejs 會直接安裝npm）

二、grunt 安裝

由於0.4.1版本的grunt分為3部分：grunt，grunt-cli 和 grunt-init。

1、安裝grunt-cli

如果之前安裝過grunt，需要先卸載 npm uninstall -g grunt

安裝 grunt-cli ： npm install -g grunt-cli

2、創建grunt項目

grunt項目一般需要以下內容:1 、grunt（需要安裝）2、grunt 插件（需要安裝） 3、package.json 和 Gruntfile.js 。（官方入門Getting started 說通過 grunt-init 和 npm init 創建。對於入門來說，這兩中方式都不太好用。推薦直接創建 package.json 和Gruntfile.js 文件）

1、在 c 盤創建文件夾:testGrunt

2、創建2個文件package.json 和 Gruntfile.js

package.json 內容如下

{
  "name": "smeitejs",
  "version": "0.1.0",
  "description": "js for smeite.com",
  "homepage": "http://smeite.com/",
  "author": "zuosanshao <zuosanshao@qq.com>",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.3.0",
    "grunt-contrib-nodeunit": "~0.1.2",
    "grunt-contrib-cssmin": "~0.5.0"
  }
}

Gruntfile.js

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
  uglify: {
    options: {
      mangle: false
    },
    build: {
      files: {
        'assets/config.min.js': ['js/config.js'],
         'assets/smeite.min.js': ['js/smeite.js'],
	 'assets/index.min.js': ['js/index.js']
      }
    }
  },

cssmin: {
  compress: {
    files: {
      'assets/all.min.css': ['css/base.css', 'css/global.css']
    }
  },
 // smeite: {
  //  files: {
  //    'assets/smeite.all.css': ['/play21/smeite.com/public/assets/css/**/*.css']
  //  }
 // },
  with_banner: {
    options: {
      banner: '/* My minified css file test test */'
    },
    files: {
      'assets/min/base.css': ['css/base.css'],
      'assets/min/global.css': ['css/global.css']
    }
  }
}

});

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

　由於在食美特項目只需要壓縮js和css文件。所有在Gruntfile.js 配置了2個grunt插件： grunt-contrib-uglify 和 grunt-contrib-cssmin

3 安裝 grunt 插件。在git 客戶端鍵入命令 cd /c/testGrunt ;