Grunt是一款自动化构建工具，下面介绍Grunt的安装和基本使用
工具/原料
nodejs
grunt
安装CLI
1、打开cmd命令行工具，输入npm install -g grunt-cli，全局安装grunt命令。该指令的作用是将grunt命令设置到系统路径，以便任何目录都可以通过grunt运行项目
2、创建grunt-web项目，并创建package.json，Gruntfile.js文件
创建package.json文件
1、{ "name": "grunt-web", "version": "1.0.0", "description": "grunt", "main": "Gruntfile.js", "dependencies": { }, "author": "eamiear", "license": "MIT", "devDependencies": { "grunt": "^0.4.5", "grunt-contrib-copy": "^0.8.0", "grunt-contrib-jshint": "^0.10.0", "grunt-contrib-sass": "*", "grunt-contrib-cssmin": "^0.12.2", "grunt-contrib-uglify": "^0.9.1", "grunt-contrib-watch": "*", "grunt-contrib-qunit": "*", "grunt-contrib-concat": "*", "grunt-autoprefixer": "~0.7.2", "grunt-contrib-compass": "latest", "grunt-contrib-livereload": "*", "grunt-contrib-connect": "*", "grunt-regarde": "*", "autoprefixer": "^6.1.0", "grunt-contrib-compass": "^1.0.3", "grunt-postcss": "^0.7.1", "load-grunt-tasks": "^3.2.0", "serve-index": "^1.7.3", "serve-static": "^1.10.2" }, "keywords": [ "grunt" ]}devDependencies：为依赖插件名称及其版本
2、执行npm install，下载依赖库
创建Gruntfile.js文件
1、module.exports = function (grunt) { grunt.initConfig({ pkg: grunt.file.readJS晦倘佳鳎ON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, dist: { files: { 'dist/js/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>'] } } }, concat: { options: { separator: ';' }, dist: { src: ['src/scripts/**/*.js'], dest: 'dist/js/<%= pkg.name %>.js' } }, cssmin: { target: { files: [ { expand: true, cwd: 'dist/css', src: ['*.css', '!*.min.css'], dest: 'dist/css', ext: '.min.css' } ] } }, connect : { options: { port: 9000, hostname: '*', livereload : 35729 }, server: { options: { open : true, base : [ '.' ] } }, dist: { options: { open: true, base: '.' } } }, regarde: { fred: { files: '*.html', tasks: ['livereload'] } }, clean: { dist: { files: [{ dot: true, src: [ 'dist', 'dist/{,*/}*' ] }] }, server: 'dist' }, watch: { livereload : { options: { livereload: '<%=connect.options.livereload%>' }, files: [ '*.html', 'app.html', 'views/{,*/}*.html', 'src/style/{,}*.css', 'src/scripts/{,}*.js' ] } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-connect'); grunt.registerTask('default', ['concat', 'uglify', 'watch']); grunt.registerTask('serve', function () { grunt.task.run([ 'connect:server', 'watch' ]); }); grunt.registerTask('build', [ 'clean:dist', 'concat', 'cssmin', 'uglify' ]);};
执行任务
1、grunt-web中注册了一个serve任务，这个任务中启动了一个服务连接及观察任务。要执行该任务，只需在命令行控制台中输入grunt serve指令即可。
