你的位置:首页 > Java教程

[Java教程]Grunt完整打包一个项目实例

Grunt确实好用,配置好Gruntfile.js之后,一个命令就行云如流水,程序帮你搞定一切,爽歪歪。

我们先看压缩前的目录:

再看打包后的目录:

build是打包后的文件夹,main.css是压缩后的,build/js下的文件也是压缩后的,build下的html也是压缩后的,减少了很多人工打包的工作。

OK,来看下我们的核心Gruntfile.js文件,打包的流程配置都是在这个里面完成。

module.exports = function(grunt) { // 项目配置 grunt.initConfig({  pkg: grunt.file.readJSON('package.json'),  clean: { //清除目标文件下文件   payment: {    src: "payment/build"   }  },  copy: {   payment: {    expand: true,    cwd: 'payment/src',//源文件路径    src: '**',//源文件目录下的所有文件    dest: 'payment/build/',//目标文件路径,把源文件下的文件复制到该目录下    flatten: false,//用来指定是否保持文件目录结构    filter: 'isFile',   },  },  uglify: {//压缩js文件   payment: {    files: [{     expand: true,     cwd: 'payment/src/js', //js源文件目录     src: '*.js', //所有js文件     dest: 'payment/build/js' //输出到此目录下    }]   }  },  // sass: {  //  payment: {  //   files: [{  //    expand: true,  //    cwd: 'src',  //    src: ['*.scss'],  //    dest: 'payment/build',  //    ext: '.css'  //   }]  //  }  // },  cssmin: { //压缩css   payment: {    "files": {     'payment/build/css/main.css': ['payment/src/css/*.css']//将数组里面的css文件压缩成一个目标文件    }   }  },  htmlmin: { //压缩html   payment: {    options: { // Target options     removeComments: true,     collapseWhitespace: true    },    files: [{     expand: true, // Enable dynamic expansion.     cwd: 'payment/src', // Src matches are relative to this path.     src: ['*.html'], // Actual pattern(s) to match.     dest: 'payment/build/', // Destination path prefix.     ext: '.html', // Dest filepaths will have this extension.     extDot: 'first' // Extensions in filenames begin after the first dot    }]   }  } }); // 加载提供"uglify"任务的插件 grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-htmlmin'); // grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); // 默认任务 grunt.registerTask('payment', ['clean:payment','copy:payment', 'uglify:payment', 'cssmin:payment', 'htmlmin:payment']);}

按照这个配置大家就可以自动化打包自己的项目咯。