常用Grunt插件配置

1.首先新建一个文件夹，我这里新建的是test_grunt，再在文件夹里添加文件夹src,dist分别用于存放源文件和最终处理过的文件

2.在test_grunt下新建Gruntfile.js和package.json，这两个文件等下需要配置，所以先创建好

3.设置package.json

{
  "name": "test_grunt",
  "version": "1.0.0",
  "devDependencies": {
  }
}

devDependencies里面用于存放接下来要安装的grunt及grunt插件信息，先设置为空

4.安装grunt及其插件

进入test_grunt目录

（1）grunt

npm install grunt --save-dev

加上--save-dev会让安装的grunt信息自动添加到步骤三中的devDependencies，而不需要我们手动添加

（2）uglify(用于JS代代码压缩)

npm install grunt-contrib-uglify --save-dev

（3）sass（将.scss文件转为.css文件）

npm install grunt-contrib-sass --save-dev

(4)cssmin（压缩css文件）

npm install grunt-contrib-cssmin --save-dev

（5）watch（自动跟踪源文件夹中文件的变化，只要有变化并保存后，dist文件夹下的文件也会相应变化）

npm install grunt-contrib-watch --save-dev

最后package.json里面的内容如下

{
  "name": "test_grunt",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-cssmin": "^0.13.0",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.9.1",
    "grunt-contrib-watch": "^0.6.1"
  }
}

test_grunt文件夹结构如下

5.接下来在Gruntfile.js文件中配置grunt插件

我的配置信息如下：

module.exports=function(grunt){
	//任务配置，所有插件的配置信息
	grunt.initConfig({
		//获取package.json的信息
		pkg:grunt.file.readJSON('package.json'),

		//uglify插件的配置信息
		uglify:{
			options:{
				stripBanners:true,
				banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd") %> */\n'
			},
      		build:{
      			expand:true,
      			cwd:'src/js',
		        src: '*.js', //所有js
		        dest: 'dist/js',
		        ext: '.min.js'
      		}
		},
		sass: {
		    dist: {
		      files: [{
		        expand: true,
		        cwd: 'src/sass',
		        src: ['*.scss'],
		        dest: 'src/css',
		        ext: '.css'
		      }]
		    }
		  },
		//mincss插件的配置信息
		cssmin: {
		  target: {
		    files: [{
		      expand: true,
		      cwd: 'src/css',
		      src: '*.css',
		      dest: 'dist/css',
		      ext: '.min.css'
		    }]
		  }
		},
		
		//watch插件的配置信息
		watch:{
			build:{
				files:['src/js/*.js','src/sass/*.scss','src/css/*.css'],
				tasks:['uglify','sass','cssmin'],
				options:{spawn:false}
			}
		}

	});

	//告诉grunt将使用插件
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-cssmin');
	grunt.loadNpmTasks('grunt-contrib-watch');
	
	
	//告诉grunt当我们在终端中输入grunt时需要组偶写什么，注意先后顺序
	grunt.registerTask('default',['uglify','sass','cssmin','watch']);
};

6.最后测试时在命令行中输入grunt便会自动watch源文件夹中文件的变化。