grunt是一个简单易上手管理构建工具。
安装:
npm install -g grunt-cli
然后创建一个工程文件夹
子目录包含src,build,另外创建Gruntfille.js和package.json两个文件
另附:
package.json
{
“name”: “kexin”,
“version”: “1.0.0”,
“devDependencies”: {
“grunt”: “^1.0.2”,
“grunt-browserify”: “^5.2.0”,
“grunt-contrib-clean”: “^1.1.0”,
“grunt-contrib-concat”: “^1.0.1”,
“grunt-contrib-copy”: “^1.0.0”,
“grunt-contrib-cssmin”: “^2.2.1”,
“grunt-contrib-jshint”: “^1.1.0”,
“grunt-contrib-uglify”: “^3.3.0”,
“grunt-contrib-watch”: “^1.0.0”,
“grunt-karma”: “^2.0.0”,
“karma-chrome-launcher”: “^2.2.0”,
“karma-jasmine”: “^1.1.1”,
“karma-mocha-reporter”: “^2.2.5”,
“karma-ng-scenario”: “^1.0.0”,
“karma-requirejs”: “^1.1.0”
}
}
Gruntfille.js:
module.exports = function (grunt) {
//所有插件的配置,任务配置,引入插件
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//压缩css
clean: {
build: {
src: ["js/build/*.min.js"]
}
},
uglify: {
options: {
stripBanners: true,
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
buildall: {//按原文件结构压缩js文件夹内所有JS文件
files: [{
expand:true,
cwd:'js/src',//js目录下
src:'**/*.js',//所有js文件
dest: 'js/build',//输出到此目录下
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
ext: '.min.js'
}]
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: ['js/build/*.min.js'],
dest: 'js/build/libs.min.js'
}
},
watch:{
build:{
files:'js/src/*.js',
tasks:['uglify','concat'],
options:{spawn:false}
}
}
});
//将使用插件
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
//注册默认任务,按顺序执行
grunt.registerTask('default',['clean','uglify','concat','watch']);
};
如有不明白之处可以看看这个网友写的
https://blog.csdn.net/qq_34099161/article/details/53305449