使用grunt構建前端項目

1. grunt構建工具是基於nodejs上的，因此在使用以前必定要先安裝好nodejs

2. 安裝好nodejs後，node -v查看node版本 npm-v 查看npm版本信息

3. 在須要用到的項目文件下安裝grunt，安裝命令 ：npm install grunt ，安裝以後沒法執行grunt命令，需安裝一個全局的grunt-cli ( grunt命令操做 ) 安裝命令：npm install -g grunt-cli，再使用 grunt --version 查看grunt-cli版本

4.將須要使用到的插件經過npm 命令安裝到本地

5. 安裝完成以後，首先需新建一個package.json文件，能夠選擇在項目根目錄下手動建立package.json的文件，也能夠選擇使用npm init命令進行建立：

 

 

當經過npm install grunt-contrib-cssmin -save-dev 命令時，將會把grunt-contrib-cssmin 添加到package.json中的devDependencies中

其次還須要一個Gruntfile.js的文件，其中配置信息以下：(使用各類插件)

 

module.exports = function (grunt) {

　　//任務配置，全部插件的配置信息

　　grunt.initConfig({

　　　　pkg: grunt.file.readJSON('package.json'),//獲取到package.json文件的信息

　　　　uglify: {//uglify壓縮插件的配置信息

　　　　　　options: {//壓縮以後,壓縮文件中的描述信息

　　　　　　　　striBanners: true,

　　　　　　　　banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'

　　　　　　},

　　　　　　build: {

　　　　　　　　//目標文件

　　　　　　　　src: 'js/index.js',

　　　　　　　　//壓縮後的文件

　　　　　　　　dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'

　　　　　　}

　　　　},

　　　　jshint: {//使用jshint查看js代碼中出現的錯誤，以及可能存在的一些問題

　　　　　　build: ['Gruntfile.js', 'js/index.js'],

　　　　　　options: {

　　　　　　　　jshintrc: '.jshintrc'

　　　　　　}

　　　　},

　　　　

　　　　watch: {//使用watch事實監控文件，實現自動化

　　　　　　build: {

　　　　　　　　files: ['js/index.js', 'css/index.css'],

　　　　　　　　tasks: ['jshint', 'uglify'],

　　　　　　　　options: {spawn: false}

　　　　　　}

　　　　}，

　　cssmin: {

　　　　options ：{

　　　　　　shorthandConpacting:false,

　　　　　　roundingPrecision:-1

　　　　}，

　　　　target : {

　　　　　　files :{

　　　　　　　　'合併後.css':['合併1.css','合併2.css','合併3.css']

　　　　　　}

　　　　}

　　}

　　});

　　//使用grunt插件

　　grunt.loadNpmTasks('grunt-contrib-uglify');

　　grunt.loadNpmTasks('grunt-contrib-jshint');

　　grunt.loadNpmTasks('grunt-contrib-watch');

　　//輸入grunt命令時須要作哪些(順序)

　　grunt.registerTask('default', [ 'uglify', 'jshint', 'watch']);

};

 

經常使用的幾種grunt插件:

• Contrib-jshint——javascript語法錯誤檢查；
• Contrib-watch——實時監控文件變化、調用相應的任務從新執行；
• Contrib-clean——清空文件、文件夾；
• Contrib-uglify——壓縮javascript代碼
• Contrib-copy——複製文件、文件夾
• Contrib-concat——合併多個文件的代碼到一個文件中
• Contrib-cssmin——壓縮css代碼
• karma——前端自動化測試工具

grunt.initConfig方法:

用於模塊配置，它接受一個對象做爲參數。該對象的成員與使用的同名模塊一一對應。

每一個目標的具體設置，須要參考該模板的文檔。就cssmin來說，minify目標的參數具體含義以下：

expand：若是設爲true，就表示下面文件名的佔位符（即*號）都要擴展成具體的文件名。

cwd：須要處理的文件（input）所在的目錄。

src：表示須要處理的文件。若是採用數組形式，數組的每一項就是一個文件名，可使用通配符。

dest：表示處理後的文件名或所在目錄。

ext：表示處理後的文件後綴名。

 

grunt經常使用函數說明：

grunt.initConfig：定義各類模塊的參數，每個成員項對應一個同名模塊。grunt.initConfig({});

grunt.loadNpmTasks：加載完成任務所需的模塊。grunt.loadNpmTasks("grunt-contrib-jshint");

grunt.registerTask：定義具體的任務。第一個參數爲任務名，第二個參數是一個數組， 表示該任務須要依次使用的模塊('defualt',['uglify','cssmin','jshint','watch']);

執行命令

 

在窗口執行命令 grunt