Grunt 配置文件

☆ 安装Grunt 及 插件

npm install grunt grunt-contrib-concat grunt-contrib-connect grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch connect-livereload --save-dev

☆ Gruntfile.js

module.exports = function(grunt) {

	var sassStyle = 'expanded';

	//任务配置代码
	grunt.initConfig({
		//读取package.json文件，获取json信息，方便在任务中应用。
		pkg: grunt.file.readJSON('package.json'),


		//sass/concat/uglify/watch/connect 名字是固定的，表示调用该插件。
		// 具体options里的参数和dist任务中的参数，需要查看每个插件的用法，根据用法来编写任务。

		//编译scss文件
		sass: {
			output: {
				options: {
					style: sassStyle
				},
				files: {
					'./css/index.css': './sass/index.scss'
				}
			}
		},
		//合并
		concat: {
			dist: {
				files: {
					'build/<%= pkg.name %>.js': '<%= pkg.main %>',
				}
			}
		},
		//压缩
		uglify: {
		    options: {
		        banner: '/*! <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %>  <%= pkg.author %> */\n'
		    },
			dist: {
				files: {
					'build/libs.min.js':'<%= pkg.libs %>',
					'build/<%= pkg.name %>.min.js':['build/<%= pkg.name %>.js'],
				}
			}
		},
		//监听文件变化，自动执行某些任务
		watch: {
			sass: {
				files: ['./sass/index.scss'],
				tasks: ['sass']
			},
			livereload: {
				options: {
					livereload: '<%= connect.options.livereload %>'
				},
				files: ['css/index.css']
			}
		},
		//创建本地服务器，以当前目录为服务器根目录
		connect: {
			options: {
				port: 9000,
				open: true,
				livereload: 35729,
				hostname: 'localhost'
			},
			server: {
				options: {
					port: 9001,
					base: './'
				}
			}
		}
	});

	//插件加载代码
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-connect');

	//任务注册代码
	//需要注意：task的命名不能与后面的任务配置同名，也就是outputcss 不能命名为 sass，否则会报错。
	grunt.registerTask('outputcss', ['sass']);
	grunt.registerTask('watching', ['sass', 'connect', 'watch']);
	grunt.registerTask('default', ['concat', 'uglify']);

};