說明:css
http://www.gruntjs.net/getting-started --grunt快速入門(建立package.json和Gruntfile.js
準備一份新的 Grunt 項目
通常須要在你的項目中添加兩份文件:package.json 和 Gruntfile。html
package.json: 此文件被npm用於存儲項目的元數據,以便將此項目發佈爲npm模塊。你能夠在此文件中列出項目依賴的grunt和Grunt插件,放置於devDependencies配置段內。npm
Gruntfile: 此文件被命名爲 Gruntfile.js 或 Gruntfile.coffee,用來配置或定義任務(task)並加載Grunt插件的。 此文檔中提到的 Gruntfile 其實說的是一個文件,文件名是 Gruntfile.js 或 Gruntfile.coffee。json
http://blog.csdn.net/playboyanta123/article/details/43230831 安裝
http://caibaojian.com/grunt.html --安裝sass
http://caibaojian.com/grunt.html#t3ide
http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html --值得研究grunt
package.json:spa
{
"name": "test_grunt",
"version": "0.1.0",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "~0.1.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-uglify": "~0.1.2"
}
}.net
Gruntfile.js配置參數:插件
// Project configuration. module.exports = function(grunt) { // 使用嚴格模式 'use strict'; // 這裏定義咱們須要的任務 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), //其餘任務 concat: { options: { separator: ';', stripBanners: true }, dist: { src: [ "js/EvenUtil.js", "js/222.js", ], dest: "assets/js/default.js" } }, uglify: { options: { }, dist: { files: { 'assets/js/default.min.js': 'assets/js/default.js' } } }, cssmin: { options: { keepSpecialComments: 0 }, compress: { files: { 'assets/css/default.css': [ "dist/css/test.css", "dist/css/common.css", "dist/css/public.css", "dist/css/index.css" ] } } }, // 設置任務,刪除文件夾 clean: { dist: 'dist' }, // 經過sass編譯成css文件 sass: { dist: { files: [{ expand: true, cwd: 'scss', src: ['*.scss'], dest: 'dist/css', ext: '.css' }] } }, // 檢測改變,自動跑sass任務 watch: { scripts: { files: ['scss/*.scss','js/*.js','assets/css/*.css'], tasks: ['sass','concat','uglify','cssmin'], options: { spawn: false } } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // 必定要引用着3個模塊 grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); // 把須要跑的任務註冊到default這裏每次運行grunt的時候先刪除dist,而後從新編譯,最後監測文件夾的狀況。 grunt.registerTask('default', ['clean:dist', 'sass:dist', 'concat', 'uglify', 'cssmin', 'watch']); };