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

一、使用環(huán)境說明：

1、在window xp 下使用

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

3、 只是入門說明，目的是快速的搭建環(huán)境，示例能夠跑起來。詳細的文檔資料請參考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、創(chuàng)建grunt項目

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

1、在 c 盤 創(chuàng)建文件夾:testGrunt

2、創(chuàng)建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 ;?

• 鍵入命令?npm install grunt-contrib-uglify ?安裝uglify
• 鍵入命令 npm install ?grunt-contrib-cssmin ?安裝cssmin

　　

4、 準備相關資料

在 /c/testGrunt 目錄下，創(chuàng)建 js目錄，并在js目錄下創(chuàng)建文件config.js ?smeite.js index.js ，創(chuàng)建css目錄，并在css目錄下創(chuàng)建base.css 和 global.css。 （這些文件都在Gruntfile.js 有配置，所以需要創(chuàng)建，內容可以隨意的寫）

5、執(zhí)行grunt 命令

執(zhí)行js壓縮命令?grunt uglify 效果如下

執(zhí)行css壓縮命令?grunt cssmin 效果如下

?

整個文件截圖

后記：1、uglify 插件的使用說明?https://npmjs.org/package/grunt-contrib-uglify?

? ? ? ? 2、cssmin插件使用說明?https://npmjs.org/package/grunt-contrib-cssmin

? ? ? ?3、插件的配置需要在gruntfile.js中配置

轉載于:https://www.cnblogs.com/meetrice/archive/2013/04/09/3009913.html

總結

以上是生活随笔為你收集整理的grunt 0.4.1构建工具入门实践(转)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。