第一步 安裝node.js
到node官網(wǎng)下載安裝包，安裝包已內(nèi)置npm包資源管理器，安裝即可！-
第二步 執(zhí)行配置及插件安裝命令
依次執(zhí)行以下命令：
安裝grunt命令行
命令：npm install -g grunt-cli 使用grunt，首先必須將grunt-cli安裝到全局環(huán)境中
安裝grunt插件
/**
* grunt不是全局安裝，需要安裝到項(xiàng)目目錄下
* —save-dev 設(shè)為此目錄的依賴，自動(dòng)在devDependencies中創(chuàng)建自己
/
命令：npm install grunt
命令：grunt 輸出 done 代表安裝成功
安裝必要插件
/文件合并插件*/
npm install grunt-contrib-concat/*js壓縮插件*/ npm install grunt-contrib-uglify /*css壓縮插件*/ npm install grunt-css -
第三步 創(chuàng)建項(xiàng)目目錄
--grunt_test |-package.json |-Gruntfile.js
package.json
/**
* 配置項(xiàng)目信息
* -name 項(xiàng)目名稱
* -version 版本號(hào)
* -devDependencies 需要使用的類庫
/
{
"name": "grunt_test",
"version": "1.0.0",
"devDependencies":
{
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.0",
"grunt-contrib-uglify": "^1.0.1",
"grunt-css": "^0.5.4"
}
}
Gruntfile.js
/*
* 配置Grunt
/
module.exports = function(grunt)
{
/*
* 定義壓縮合并
/
grunt.initConfig(
{
/*
* 合并任務(wù)
/
concat:
{
/*
* 將js文件內(nèi)所有js，合并為all.js
/
dist:
{
src : ['js/.js'],
dest: 'js/all.js'
},
/**
* 將css文件內(nèi)所有css，合并為all.css
*/
css:
{
src: ['css/*.css'],
dest: 'css/all.css'
}
},
/**
* 壓縮CSS
*/
cssmin:
{
/**
* 將all.css,壓縮為all.min.css
*/
css:
{
src : 'css/all.css',
dest: 'css/all.min.css'
}
},
/**
* 壓縮JS
*/
uglify:
{
/**
* 將all.js,壓縮為all.min.js
*/
build:
{
src : 'js/all.js',
dest: 'js/all.min.js'
}
}
})
/**
* 加載必要插件
*/
grunt.loadNpmTasks('grunt-css');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
/**
* 注冊(cè)必要插件
*/
grunt.registerTask('default', ['concat','uglify','cssmin']);
}
-
第四步 完成環(huán)境配置
使用grunt命令，執(zhí)行相關(guān)任務(wù)
