Grunt確實好用,配置好Gruntfile.js以後,一個命令就行雲如流水,程序幫你搞定一切,爽歪歪。css
咱們先看壓縮前的目錄:html
再看打包後的目錄:json
build是打包後的文件夾,main.css是壓縮後的,build/js下的文件也是壓縮後的,build下的html也是壓縮後的,減小了不少人工打包的工做。數組
OK,來看下咱們的核心Gruntfile.js文件,打包的流程配置都是在這個裏面完成。sass
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']); }
按照這個配置你們就能夠自動化打包本身的項目咯。grunt