grunt构建前端自动化
一.grunt是基于nodejs的，所以首先我们需要安装node
二.全局安装grunt 可以参考 http://www.gruntjs.net/docs/getting-started/
进行安装.
1.全局安装
npm install -g grunt-cli
2.进入当前项目根据配置文件
package.json
进行本地安装，或者直接把以前项目所有用过的本地安装文件直接复制到当前项目使用
3.任务设置
打开gruntfile.js进行设置
module.exports = function (grunt) {
// 任务配置,所有插件的配置信息
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//1.先清空发布文件夹
clean: {
src: ["publish/"]
},
//2.复制到发布文件夹 不要破坏源文件
copy: {
main: {
files: [
{ src: 'assets/**', dest: 'publish/' },
// { src: 'assets/*.html', dest: 'publish/assets/' },
]
}
},
//3.进行合并
concat: {
js:{
dest: 'publish/tmp/concat/js/app.js',
src: ['publish/assets/js/*.js']
},
css:{
dest: 'publish/tmp/concat/css/app.css',
src: ['publish/assets/css/*.css']
}
},
//4.进行压缩
uglify: {
main: {
files: [
{
//dest: 'publish/js/app.min.js',
//src: 'publish/tmp/concat/js/app.js'
expand: true,
cwd: "assets/js",
ext: ".min.js",
src: '**/*.js',
dest: 'publish/js'
}
]
}
},
cssmin: {
main:{
files: [
{
//dest: 'publish/css/app.min.css',
//src: 'publish/tmp/concat/css/app.css'
expand: true,
cwd: "assets/css",
ext: ".min.css",
src: '**/*.css',
dest: 'publish/css'
}
]
}
},
//4.进行hash运算重命名文件
rev: {
options: {
algorithm: 'md5',
length: 8
},
files: {
src: ['publish/assets/js/*.js', 'publish/assets/css/*.css'],
}
},
//5.替换静态资源链接
useminPrepare: {
src: "publish/assets/*.html"
},
usemin: {
html: 'publish/assets/*.html',
}
});
// 告诉grunt我们将使用插件
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-rev');
grunt.loadNpmTasks('grunt-usemin');
// 告诉grunt当我们在终端中输入grunt时需要做些什么
grunt.registerTask('default', ['clean', 'copy', 'uglify', 'concat', 'cssmin', 'rev', 'usemin']);
};
参考链接