前端优化其中之一就是在代码写好之后合并压缩文件再交付后台,对于没有应用打包工具的项目,我使用了Grunt来打包压缩相应的JS css文件。小白的使用方法:
1、安装Grunt
使用NPM来安装Grunt:(使用命令行)npm install -g grunt-cli
2、创建2个配置文件 package.json(npm install 下载相关的包) Gruntfile(启动打包相关事项)
打包JS的相关配置:
package:
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/zepto.min.js', 'src/touch.js', 'src/index.js'],
dest: 'dest/libs.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat']);
}
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%=pkg.file %>.js',
dest: 'dest/<%= pkg.file %>.min.js'
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
}
打包css的相关配置:
package:
{
"name": "demo",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt":"~0.4.0",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1",
"grunt-css": ">0.0.0"
},
"dependencies": {
"express": "3.x"
}
}
Gruntfile(单个和多个通用):
module.exports =function(grunt) {
// 配置
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
concat : {
css : {
src: ['asset/*.css'],
dest:'dest/asset/all.css'
}
},
cssmin: {
css: {
src:'dest/asset/all.css',
dest:'dest/asset/all-min.css'
}
}
});
// 载入concat和css插件,分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-css');
// 默认任务
grunt.registerTask('default', ['concat','cssmin']);
};
src这些为目录的相对路径,然后在该目录下输入命令行 grunt即可得到.min.css文件