Gruntfile.js模板

module.exports = function(grunt) {
    // 配置項
    var AppConfig = {
        name: 'app',
        //源文件目錄
        src: 'app/src',
        //生產文件目錄
        dist: 'app/assets'
    };

    //加載全部的任務
    require('load-grunt-tasks')(grunt);
    //顯示每個任務所花的時間和百分比
    require('time-grunt')(grunt);

    grunt.initConfig({
        config: AppConfig,

        // 加載外部包列表
        pkg: grunt.file.readJSON('package.json'),

        // Js文件壓縮
        uglify: {
            options: {
                // 此處定義的banner註釋將插入到輸出文件的頂部
                banner: '/*! <%= pkg.author.name %>-<%=pkg.verson%> 最後修改於：<%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                options: {
                    // 不混淆變量名
                    mangle: false,
                    // 不刪除註釋，還能夠爲 false（刪除所有註釋）
                    preserveComments: 'false',
                    // 輸出壓縮率，可選的值有 false(不輸出信息)
                    report: "min"
                },
                files: [{
                    expand: true,
                    cwd: '<%= config.dist %>/script',
                    src: ['**/*.js'],
                    dest: '<%= config.dist %>/script',
                    ext: '.min.js'
                }, {
                    expand: true,
                    cwd: '<%= config.dist %>/plugins',
                    src: ['**/*.js'],
                    dest: '<%= config.dist %>/plugins',
                    ext: '.min.js'
                }]
            }
        },

        // 代碼質量檢查工具
        jshint: {
            files: ['Gruntfile.js', '<%= config.src %>/script/*.js', '<%= config.dist %>/script/*.js'],
            options: {
                jshintrc: '.jshintrc'
            }
        },

        // Less編譯
        less: {
            build: {
                options: {
                    compress: false,
                    yuicompress: false
                },
                files: [{
                    expand: true,
                    cwd: '<%= config.src %>/less',
                    src: ['**/*.less'],
                    dest: '<%= config.dist %>/css',
                    ext: '.css'
                }]
            }
        },

        // Sass編譯
        sass: {
            build: {
                options: {
                    style: 'expanded',
                    sourcemap: 'none'
                },
                files: [{
                    expand: true,
                    cwd: '<%= config.src %>/sass',
                    src: ['**/*.scss'],
                    dest: '<%= config.dist %>/css',
                    ext: '.css'
                }, {
                    expand: true,
                    cwd: '<%= config.src %>/plugins/bootstrap-sass/assets/stylesheets',
                    src: ['**/*.scss'],
                    dest: '<%= config.dist %>/plugins/bootstrap/css/',
                    ext: '.css'
                }]
            }
        },

        //css壓縮插件
        cssmin: {
            build: {
                files: [{
                    expand: true,
                    cwd: '<%= config.dist %>',
                    src: ['**/*.css', '!*.min.css'],
                    dest: '<%= config.dist %>',
                    ext: '.min.css'
                }]
            }
        },

        // 圖片壓縮
        imagemin: {
            build: {
                files: [{
                    expand: true,
                    cwd: '<%= config.src %>/images',
                    src: '{,*/}*.{png,jpg,jpeg,gif}',
                    dest: '<%= config.dist %>/images'
                }]
            }
        },

        // Autoprefixer解析CSS文件而且添加瀏覽器前綴到CSS規則裏,保證CSS兼容性
        autoprefixer: {
            build: {
                files: [{
                    expand: true,
                    cwd: '<%= config.dist %>/css',
                    src: ['*.css', '!*.min.css'],
                    dest: '<%= config.dist %>/css',
                    ext: '.css'
                }]
            }
        },

        // 依賴庫自動注入
        wiredep: {
            build: {
                // 依賴注入的頁面
                devDependencies: true,
                src: ['<%= config.name %>/index.html'],
                ignorePath: /^(\.\.\/)*\.\./,
                directory: '<%= config.dist %>/script/plugins'
            }
        },
        // 合併文件
        concat: {
            bootstrap: {
                src: [
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/transition.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/alert.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/button.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/carousel.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/collapse.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/modal.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/popover.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/scrollspy.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/tab.js',
                    '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/bootstrap/affix.js'
                ],
                dest: '<%= config.dist %>/plugins/bootstrap/bootstrap.js'
            }
        },
        // 文件複製
        copy: {
            build: {
                files: [{
                    //font-awesome fonts
                    expand: true,
                    flatten: true,
                    cwd: '<%= config.src %>/plugins/font-awesome/fonts/',
                    src: ['**'],
                    dest: '<%= config.dist %>/plugins/font-awesome/fonts/',
                    filter: 'isFile'
                }, {
                    //font-awesome css
                    expand: true,
                    flatten: true,
                    cwd: '<%= config.src %>/plugins/font-awesome/css/',
                    src: ['font-awesome.css'],
                    dest: '<%= config.dist %>/plugins/font-awesome/css/',
                    filter: 'isFile'
                }, {
                    //bootstrap fonts
                    expand: true,
                    flatten: true,
                    cwd: '<%= config.src %>/plugins/bootstrap-sass/assets/fonts/',
                    src: ['**'],
                    dest: '<%= config.dist %>/plugins/bootstrap/fonts/bootstrap/',
                    filter: 'isFile'
                }, {
                    //bootstrap
                    expand: true,
                    cwd: '<%= config.src %>/plugins/bootstrap-sass/assets/javascripts/',
                    src: ['bootstrap.js'],
                    dest: '<%= config.dist %>/plugins/bootstrap/',
                    filter: 'isFile'
                }, {
                    //Jquery
                    expand: true,
                    cwd: '<%= config.src %>/plugins/jquery/dist/',
                    src: ['jquery.js'],
                    dest: '<%= config.dist %>/plugins/',
                    filter: 'isFile'
                }]
            }
        },
        // 清理文件
        clean: {
            build: {
                files: [{
                    dot: true,
                    src: ['.sass-cache']
                }]
            }
        },
        // 本地代理服務器
        connect: {
            options: {
                port: 9000,
                // 默認就是這個值，可配置爲本機某個 IP，localhost 或域名
                hostname: 'localhost',
                // 聲明給 watch 監聽的端口
                livereload: 35729
            },
            proxies: [{
                port: 8090,
                host: '192.168.0.111',
                context: '/webapi'
            }],
            server: {
                options: {
                    open: true, //自動打開網頁 http://
                    base: [
                        '<%= config.name %>' //主目錄
                    ]
                }
            }
        },

        // watch插件的配置信息(監控js,css文件,如改變自動壓縮,語法檢查)
        watch: {
            // 監聽bower包的變化
            bower: {
                files: ['bower.json', 'package.json']
            },
            // 用於監聽sass文件
            sass: {
                files: ['<%= config.src %>/sass/**/*.scss'],
                tasks: ['sass:build', 'cssmin:build']
            },
            // 用於監聽css文件
            css: {
                files: ['<%= config.dist %>/css/*.css'],
                tasks: ['autoprefixer']
            },
            // 用於監聽JS文件
            js: {
                files: ['<%= config.src %>/script/**/*.js'],
                tasks: ['jshint', 'uglify:build'],
            },

            livereload: {
                options: {
                    livereload: '<%=connect.options.livereload%>' //監聽前面聲明的端口  35729
                },
                files: [ //下面文件的改變就會實時刷新網頁
                    '<%= config.name %>/*.html',
                    '<%= config.dist %>/css/{,*/}*.css',
                    '<%= config.dist %>/script/{,*/}*.js',
                    '<%= config.dist %>/images/{,*/}*.{png,jpg,gif}'
                ]
            }
        }
    });

    // 默認被執行的任務列表
    grunt.registerTask('default', [
        'dev',
        'connect:server',
        'watch'
    ]);

    //發佈
    grunt.registerTask('build', [
        'sass',
        'copy',
        'autoprefixer',
        'cssmin',
        'uglify',
        'imagemin',
        'clean'
    ]);

    grunt.registerTask('dev', [
        'sass',
        'copy',
        'autoprefixer',
        'clean'
    ]);

};