0.简介
grunt是一个任务自动运行器。简单来讲，用了以后，再也不用每次修改sass后，去生成下css,也再也不用去一遍遍压缩js了 ，也再也不用修改了点点东西就要去刷新页面，也不需要去复杂地建立一个本地服务了，你只要在Gruntfile.js里面写好任务，这一切grunt都帮你解决了。（grunt的主要功能在3里面有写）
1.安装(首先确保你安装了nodejs)
sudo npm install -g grunt-cli
2.进入到你得操作文件夹（比如 ／grunt／demo）,然后执行
npm init
一路回车后（当然可以慢慢填写），会生成一个package.json文件，如下
3.安装grunt所需要的插件
a.需要实现功能：
（1）合并文件 ： grunt-contrib-concat
（2）语法检查 : grunt-contrib-jshint
（3）sass编译 : grunt-contrib-sass
（4）压缩文件 : grunt-contrib-ugligy
(5) 建立本地服务器 : grunt-contrib-connect
（6）监听文件变动 : grunt-contrib-watch
b. 安装这些插件
// --save-dev 参数会将安装的文件自动标记到package.json里面
// 先安装这些插件的依赖grunt
npm install grunt --save-dev
// 然后安装这些插件
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect安装好以后，我们可以看到demo的文件夹下node_modules多了我们安装的插件包；而package.json里面也记录下了我们的安装文件
4.实例一下
（1）新建一个Gruntfile.js 完成 sass的自动生成，js的语法检查、合并成一个文件、压缩，然后监听文件变化，并建立本地的服务器
（2）目录，依次为红色（我们自己写的文件）；蓝色（编译或者合并后的结果）；黄色（压缩后的结果）
（3）源码
Gruntfile.js
module.exports = function(grunt) { var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // 自动将 ./scss/style.scss 生成 ./style.css sass: { output : { options: { style: sassStyle }, files: { './style.css': './scss/style.scss' } } }, // 自动将 ./src/plugin.js 和 ./src/plugin2.js 合并成 ./global.js concat: { dist: { src: ['./src/plugin.js', './src/plugin2.js'], dest: './global.js', }, }, uglify: { compressjs: { files: { './global.min.js': ['./global.js'] } } }, jshint: { all: ['./global.js'] }, watch: { scripts: { files: ['./src/plugin.js','./src/plugin2.js'], tasks: ['concat','jshint','uglify'] }, sass: { files: ['./scss/style.scss'], tasks: ['sass'] }, livereload: { options: { livereload: '<%= connect.options.livereload %>' }, files: [ 'index.html', 'style.css', 'global.min.js' ] } }, connect: { options: { port: 9000, open: true, livereload: 35729, hostname: 'localhost' }, server: { options: { port: 9001, base: './' } } } }); // sass编译 grunt.loadNpmTasks('grunt-contrib-sass'); // 合并文件 grunt.loadNpmTasks('grunt-contrib-concat'); // 语法检查 grunt.loadNpmTasks('grunt-contrib-jshint'); // 压缩文件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 监听文件变动 grunt.loadNpmTasks('grunt-contrib-watch'); // 建立本地服务器 grunt.loadNpmTasks('grunt-contrib-connect'); grunt.registerTask('outputcss',['sass']); grunt.registerTask('concatjs',['concat']); grunt.registerTask('compressjs',['concat','jshint','uglify']); grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']); grunt.registerTask('default'); };
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<script src="global.min.js" charset="utf-8"></script>
</head>
<body>
<a href="#">HELLO GRUNT BY CYNTHIA</a>
</body>
</html>
style.scss
*{ padding: 0; margin: 0; border: 0; outline: 0; font-size: 12px; } body{ background: #f4f4f4 } a{ text-decoration: none; font-size: 44px; color: #333; &:hover {cursor: pointer;} }
plugin.js
console.log('cynthia wuqian');
plugin2.js
console.log('say hello grunt');
4.这时候我们来到控制台，运行
grunt watchit
然后我们会看到 ： 自动建立了本地服务，显示index.html , 修改scss后，grunt会帮你自动生成css,并更新到页面
而页面中我们也能看到
注意事项（后补充，不是以上文件目录结构）
