grunt:前端自动化构建

Grunt 基于 Node.js ，用JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。

安装 Grunt

确保已经安装了 Node.js。实际上，安装的并不是Grunt，而是 Grunt-cli，也就是命令行的Grunt

npm install -g grunt-cli

生成 package.json 文件

package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下，cd进入项目目录后：

npm init

安装 Grunt 和所需要的插件

打算让 Grunt 帮忙实现下面几个功能：检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。

根据这些任务需求，需要用到：

• 合并文件：grunt-contrib-concat
• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变动：grunt-contrib-watch
• 建立本地服务器：grunt-contrib-connect

下面我们就要在这个项目中安装这些插件，执行命令：

npm install grunt --save-dev

打开 package.json 文件看下，是不是多了

"devDependencies": {
  "grunt": "^0.4.5"
}

继续安装 Grunt 的插件，当然，不需要一个个的安装，可以执行以下命令：

npm install --save-dev grunt-contrib-concatgrunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglifygrunt-contrib-watch grunt-contrib-connect

配置 Gruntfile.js 的语法

这是一个 JS 文件，你可以写任意的 JS 代码，比如声明一个 对象来存储一会要写任务的参数，或者是一个变量当作开关等等。

然后，所有的代码要包裹在

module.exports = function(grunt) {
    ...
};

里面。没有为什么。

里面的代码，除去自定义的乱七八糟的 JS，与 Grunt 有关的主要有三块代码：任务配置代码、插件加载代码、任务注册代码。

任务配置代码

例如下面代码：

grunt.initConfig({
 pkg:grunt.file.readJSON('package.json'),
 uglify: {
  options: {
   banner: '/*!<%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
    },
  build: {
   src:'src/<%= pkg.name %>.js',
   dest:'build/<%= pkg.name %>.min.js'
  }
 }
});

可以看出，具体的任务配置代码以对象格式放在grunt.initConfig 函数里面，其中先写了一句 

pkg:grunt.file.readJSON('package.json') 功能是读取 package.json 文件，并把里面的信息获取出来，方便在后面任务中应用

在Uglify 插件下面，有一个 build 任务，内容是把XX.js 压缩输出到 xx.min.js 里面。如果你需要更多压缩任务，也可以参照 build 多写几个任务。

插件加载代码

这个就比较简单了，由于上面任务需要用到 grunt-contrib-uglify，当 grunt-contrib-uglify安装到我们的项目之后，写下下面代码即可加载：

grunt.loadNpmTasks('grunt-contrib-uglify');

任务注册代码

插件也加载了，任务也布置了，下面我们得注册一下任务，使用

grunt.registerTask('default', ['uglify']);

来注册一个任务。上面代码意思是，你在 default 上面注册了一个 Uglify 任务，default 就是别名，它是默认的 task，当你在项目目录执行 grunt 的时候，它会执行注册到 default 上面的任务。

也就是说，当我们执行 grunt 命令的时候，uglify 的所有代码将会执行。我们也可以注册别的 task，例如：

grunt.registerTask('compress', ['uglify:build']);

如果想要执行这个 task，我们就不能只输入 grunt 命令了，我们需要输入 grunt compress 命令来执行这条 task，而这条 task 的任务是 uglify 下面的 build 任务，也就是说，我们只会执行 uglify 里面 build 定义的任务，而不会执行 uglify 里面定义的其他任务。

这里需要注意的是，task 的命名不能与后面的任务配置同名，也就是说这里的 compress 不能命名成 uglify，这样会报错或者产生意外情况

加上这三块代码，我们的示例 Gruntfile.js 就是这样子的：

module.exports = function(grunt) {
  // Projectconfiguration.
 grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")%> */\n'
      },
      build: {
        src:'src/<%= pkg.name %>.js',
        dest:'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load theplugin that provides the "uglify" task.
 grunt.loadNpmTasks('grunt-contrib-uglify');
  // Defaulttask(s).
 grunt.registerTask('default', ['uglify']);
};

配置 Gruntfile.js：实际操作，这个文件手动创建即可

下面的代码是一个实际的操作代码

module.exports = function(grunt) {
	
	var sassStyle = 'expanded';
	
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		sass: {
			output:{
				options:{
					style:sassStyle
				},
				files:{
					'./style.css':'./scss/style.scss'
				}
			}
		},
		concat: {
			options: {
				separator: '',
			},
			dist: {
				src: ['./src/test_1.js','./src/test_2.js'],
				dest: './global.js',
			},
		},
		uglify: {
			compressjs: {
				files:{
					'./global.min.js':['./global.js']
				}
			}
		},
		jshint: {
			all: ['./global.js']
		},
		watch: {
			scripts: {
				files: ['./src/test_1.js','./src/test_2.js'],
				tasks: ['concat','jshint','uglify']
			},
			sass: {
				files: ['./scss/style.scss'],
				tasks: ['sass']
			},
			livehood: {
				options: {
					livereload: '<%=connect.options.livereload %>'
				},
				files: [
				'index.html',
				'style.css',
				'js/global.min.js'
				]
			}
		},
		connect: {
			options: {
				port: 9000,
				open: true,
				livereload: 35729,
				hostname: 'localhost'
			},
			server: {
				options: {
					port: 9091,
					base: './'
				}
			}
		}
	});

	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');

};

• sass指的是配置编译 Scss 文件的 task。把示例Gruntfile.js结构复制进去：需要先安装ruby、sass、按顺序执行ruby -v，和sass -v。这里是将 ./scss/style.scss 编译成 ./style.css 文件。编译多个的时候，使用类似json的结构在后边添加即可
• concat指的是把两个js文件合成一个js文件
• uglify指的是将js文件压缩成min.js文件
• jshint指的是检查文件
• watch指的是监听文件变动
• connect指的是创建本地服务，刷新页面