Grunt入门

#1. 安装grunt
npm i -g grunt
npm i -g grunt-cli

#2. 编写插件配置文件package.json
{
“name”: “my-project-name”,
“version”: “0.1.0”,
“devDependencies”: {
“grunt”: “”,
“grunt-contrib-jshint”: “”,
“grunt-contrib-uglify”: “”,
“grunt-contrib-concat”: “”,
“grunt-contrib-watch”: “”,
“grunt-contrib-cssmin”: “”,
“grunt-contrib-htmlmin”: “”
}
}

#3. 安装配置的插件
npm i

#4. 编写Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
//合并js文件
concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ‘;’
},
js: {
// 将要被合并的js文件
src: [‘WebContent/frame/js/.js’],
// 合并后的JS文件的存放位置
dest: ‘dist/frame/js/public.js’
},
css: {
src: [‘WebContent/frame/css/.css’],
dest: ‘dist/frame/css/public.css’
}
},
//检查js语法
jshint: {
// define the files to lint
files: [‘gruntfile.js’, ‘WebContent/*/.js’],
// configure JSHint (documented at http://www.jshint.com/docs/)
options: {
// more options here if you want to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true
}
}
},
//压缩js文件
uglify: {
options: {
banner: ‘photter’
},
minify:{
files: {
‘dist/frame/js/public.min.js’: ‘dist/frame/js/public.js’
}
}
},
//压缩css文件
cssmin: {
dist: {
options: {
banner: ‘photter 1.0’
},
files: {
‘dist/frame/css/public.min.css’: [‘dist/frame/css/.css’]
}
}
},
//压缩html
htmlmin:{
dist: {
options: {
removeComments: true, //删除注释
collapseWhitespace: true //删除标签间的空格
},
files: [
{
expand: true,
cwd: ‘WebContent’,
src: [‘.html’],
dest: ‘dist’
}
]
}
}
});

  grunt.loadNpmTasks('grunt-contrib-uglify');
  //grunt.loadNpmTasks('grunt-contrib-jshint');
  // grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');
  //grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  //grunt.loadNpmTasks('grunt-contrib-uncss');
  // 只需在命令行上输入"grunt"，就会执行default task
  grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};

#5.自动化构建
grunt

---

一部由众多技术专家推荐， 帮你成为具有全面能力和全局视野工程师的进阶利器—— 《了不起的JavaScript工程师》出版了！ 点击下方链接即刻踏上进阶之路！

• 淘宝：https://detail.tmall.com/item.htm?id=600756390664
• 京东：https://item.jd.com/12562349.html?dist=jd
• 当当：http://product.dangdang.com/27922044.html