Grunt_1從安裝開始建立一個基本的Grunt

Grunt的介紹：http://www.gruntjs.net/getting-started

文件架構：https://github.com/zhangsai521314/Grunt

1：安裝Git Bash，下載地址https://git-scm.com/download/win（安裝一路next）

2：安裝node.js+npm，下載地址：https://nodejs.org/en/download/

注意：到這個選項的時候選這個

3：Git Bush安裝Grunt客戶端：npm install -g grunt-cli

4：打開git bash查看安裝是否成功。

4：項目結構圖：

5:把package.json放到MvcApplication1文件夾下。package.json的基本內容。

{
  "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-concat": "^0.5.0", "grunt-contrib-cssmin": "^0.10.0", "grunt-contrib-uglify": "^0.5.1" } }

6：git bash進入MvcApplication1文件夾下。執行npm install，若是此時沒有package.json文件則會報錯。

7：執行成功

8：在目錄下添加Gruntfile.js

// 經常使用的功能： // uglify:壓縮 // cssmin:css操做 // imagemin：圖片操做 // htmlmin:html操做 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: {//壓縮  options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'//頭信息  }, build: { //動態文件映射，當運行任務時會自動找到cwd參數下的src參數下全部符合規則的js文件 //添加或刪除文件時不須要更新 Gruntfile。  files: [ { expand: true, // 啓用動態擴展 cwd: 'Scripts/', // 源文件匹配都相對此目錄 src: ['*.js'], // 匹配規則 dest: 'dest/js/', // 任務目標保存路徑 ext: '.min.js', // 目標文件路徑中文件的擴展名 extDot: 'first' // 擴展名始於文件名的第一個點號  }, ], } }, cssmin: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n', }, //動態文件映射，當運行任務時會自動找到cwd參數下的src參數下全部符合規則的css文件  build: { files: [{ expand: true, cwd: 'Content/', src: ['*.css','**/*.css'], dest: 'dest/css/', ext: '.min.css', extDot: 'first' }] } } }); //載入concat和uglify插件，分別對於合併和壓縮 grunt.loadNpmTasks('grunt-contrib-uglify');// grunt.loadNpmTasks('grunt-contrib-cssmin'); //當執行 Grunt 且不經過參數指定任務時，將執行本配置的內容任務。 grunt.registerTask('default', ['uglify','cssmin']); }

9：使用grunt命令執行壓縮css， grunt cssmin

 

 

寫文不易,轉載需註明出處：http://www.cnblogs.com/zszs/p/5662541.html