web前端开发环境搭建(grunt)
以上推荐文章已经很详细的讲解了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']
}
}
}