Grunt——前端自动化构建工具
Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。
Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。；奇数版本号的 Node.js 被认为是不稳定的开发版。
在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。
安装：grunt-cli
npm install -g grunt-cli
在使用Grunt时，请先看看官网，先创建两个文件
package.json:配制插件，等其他参数
{ "name": "WebApp", "version": "0.1.0",//这个请注意格式，防止出现'0.1’,'1',这些值会出现莫名错误 "repository": { "type": "git", "url": "git://github.com/gruntjs/grunt.git" }, "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-clean": "~0.6.0", "grunt-contrib-coffee": "~0.12.0", "grunt-contrib-compass": "~1.0.3", "grunt-contrib-concat": "~0.5.1", "grunt-contrib-cssmin": "~0.12.2", "grunt-contrib-csslint": "~0.4.0", "grunt-contrib-htmlmin": "~0.4.0", "grunt-contrib-imagemin": "~0.9.4", "grunt-contrib-uglify": "~0.9.1", "grunt-contrib-jshint": "~0.11.2", "grunt-contrib-watch": "~0.6.1", "grunt-contrib-requirejs": "~0.4.4", "grunt-usemin": "~3.0.0", "grunt-filerev": "~2.3.1", "grunt-contrib-copy": "~0.8.0" } }
Gruntfile.js:自定义任务
module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), useminPrepare: { html: 'app/index.html' }, concat: { js: { dest: 'tmp/concat/app.js', src: [ 'app/js/app.js', 'app/js/index.js', 'app/js/thing-model.js', 'app/js/thing-view.js' ] } }, uglify: { js: { dest: 'tmp/uglify/app.js', src: ['tmp/concat/app.js'] } }, filerev: { js: { dest: 'filerev/js', src: ['app/js/*.js', 'tmp/uglify/*.js'] }, scc: { dest: 'filerev/css', src: ['app/css/*.css'] } }, usemin: { html: 'app/index.html', options: { assetsDirs: ['tmp/uglify', '']//这个值请注意，当执行时不能正常替换静态资源引用时，就是他在作怪 } } }); grunt.loadNpmTasks('grunt-contrib-copy');//注册插件，必需 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-filerev'); grunt.loadNpmTasks('grunt-usemin'); grunt.loadNpmTasks('grunt-contrib-clean');
//默认任务顺序 grunt.registerTask('default', [ 'useminPrepare', 'concat', 'uglify', 'filerev', 'usemin' ]); };
配制成功后cmd进入你的项目根目录下
npm install
安装插件，时间很长点
然在根目录下执行
grunt
执行默认任务
demo:
目录：
<!DOCTYPE html> <html> <head> <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <title>Title</title> <!-- build:js /tmp/uglify/app.js--> <script src="/app/js/app.js"></script> <script src="/app/js/index.js"></script> <script src="/app/js/thing-model.js"></script> <script src="/app/js/thing-view.js"></script> <!-- endbuild --> <script src="/app/js/app.js"></script> <script src="/app/js/index.js"></script> <script src="/app/js/thing-model.js"></script> <script src="/app/js/thing-view.js"></script> <link href="/app/css/index.css" rel="stylesheet" /> </head> <body> <!--{"app\\js\\app.js":"filerev\\js\\app.bc7ed700.js", "app\\js\\index.js":"filerev\\js\\index.7f1f0127.js", "app\\js\\thing-controller.js":"filerev\\js\\thing-controller.7f1f0127.js", "app\\js\\thing-model.js":"filerev\\js\\thing-model.a74d0e62.js", "app\\js\\thing-view.js":"filerev\\js\\thing-view.d80fca0d.js"}--> <p>this is a grunt usemin</p> <img src="image.png" /> </body> </html>
body中的注释内容为
grunt-filerev插件的map,grunt-usemin就是使用他来替换引用
替换引用后得：
<!DOCTYPE html> <html> <head> <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <title>Title</title> <script src="/tmp/uglify/app.6bdcf715.js"></script> <script src="/app/js/app.bc7ed700.js"></script> <script src="/app/js/index.7f1f0127.js"></script> <script src="/app/js/thing-model.a74d0e62.js"></script> <script src="/app/js/thing-view.d80fca0d.js"></script> <link href="/app/css/index.704e3ff7.css" rel="stylesheet" /> </head> <body> <!--{"app\\js\\app.js":"filerev\\js\\app.bc7ed700.js", "app\\js\\index.js":"filerev\\js\\index.7f1f0127.js", "app\\js\\thing-controller.js":"filerev\\js\\thing-controller.7f1f0127.js", "app\\js\\thing-model.js":"filerev\\js\\thing-model.a74d0e62.js", "app\\js\\thing-view.js":"filerev\\js\\thing-view.d80fca0d.js"}--> <p>this is a grunt usemin</p> <img src="image.png" /> </body> </html>
以上就是我现在，还在摸索的grunt,后面慢慢研究研究！希望有一天能用上他
