web前端开发环境搭建（grunt）

web前端开发环境搭建（grunt）

本文参考： 用grunt搭建自动化的web前端开发环境-完整教程

以上推荐文章已经很详细的讲解了node.js  grunt的安装，今天重点写一下有关web前端开发插件的安装。

        在package.json中可定义一些参数如name、version、author等。在Gruntfile.js中通过grunt.file.readJSON('package.json') 引入文件，然后可通过如<%=pkg.name%>访问package.json中定义的参数。package.json中，“devDependencies”参数为自动生成，包含项目依赖的所有插件。在dos中，cd到指定目录下，通过如：

npm install grunt-contrib-uglify --save-dev 安装插件，并生成依赖。grunt-contrib-uglify为依赖插件的名称，官网 http://www.gruntjs.net/plugins可查询。

{
  "name": "name",
  "version": "1.0.0",
  "description": "frame",
  "author": "lvyang",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-uglify": "^0.11.0"
  }
}

       在Gruntfile.js中，基本代码如下

module.exports = function(grunt){
	
	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),
		
		
	});
	
};

一、uglify  （用于压缩javascript文件）

       在dos中，cd到项目目录下，运行npm install grunt-contrib-uglify --save-dev 安装uglify插件。在package.json中会自动生成"grunt-contrib-uglify": "^0.11.0"依赖。

       在grunt.initConfig方法中，添加代码：

uglify:{
	options: {
		stripBanners: true,
		banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n'
	},
	my_target: {
	       files: {
	          'js/min/index.js.min.js': ['js/index.js','js/jquery-1.11.1.js']
	       }
	}
       },

         在files中可以将多个js文件合并/压缩成一个js文件，如：'js/min/<%=pkg.name%>-<%=pkg.version%>.js.min.js': ['js/ZYXB.js','js/jquery-1.11.1.js']。也可以对不同的js文件分别进行压缩，如：'js/min/index.js.min.js': ['js/index.js'] , 'js/min/jquery-1.11.1.min.js':['js/jquery-1.11.1.js']  。

二、cssmin（用于压缩css文件）

       运行npm install grunt-contrib-cssmin --save-dev 安装uglify插件。在package.json中会自动生成"grunt-contrib-cssmin": "^0.14.0"依赖。

       在grunt.initConfig方法中，添加代码：

cssmin: {
	options: {
	    	shorthandCompacting: false,
	    	roundingPrecision: -1
  	},
  	target: {
	    	files: {
	      		'css/min/main.min.css': ['css/main.css','css/style.css']
	      		//'css/min/style.min.css':['css/style.css']
	    	}
  	}
	}

         在files中可以将多个css文件合并压缩成一个css文件，如：'css/min/main.min.css': ['css/main.css','css/style.css']。也可以对不同的css文件分别进行压缩，如：'css/min/main.min.css': ['css/main.css','css/style.css'],'css/min/style.min.css':['css/style.css'] 。