requirejs + sass 實現的前端及 grunt 自動化構建

時間 2019-11-11

標籤 requirejs sass 實現前端 grunt 自動化構建欄目 JavaScript 简体版

原文原文鏈接

對於如今的 vue 、 react 、webpack 來講也許有點舊了，有時候，越簡單的技術越可靠，備份一下css

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        compass: {
            development: {
                options: {
                    generatedImagesDir:'public/src/slice',//合併後的雪碧圖dir
                    imagesDir:'public/src/slice', //雪碧圖合併前圖片碎片dir
                    sassDir: 'public/src/sass',
                    cssDir: 'public/src/sass-css',
                    outputStyle:'compressed',//CSS output mode. Can be: nested, expanded, compact, compressed.
                    force:false
                }
            }
        },

        sprite: {
            options: {
                // sprite背景圖源文件夾，只有匹配此路徑纔會處理，默認 images/slice/
                imagepath: 'public/src/slice/',
                // 雪碧圖輸出目錄，注意，會覆蓋以前文件！默認 images/
                spritedest: 'public/src/css/',
                // 替換後的背景路徑，默認 ../images/
                spritepath: 'img/',
                // 各圖片間間距，若是設置爲奇數，會強制+1以保證生成的2x圖片爲偶數寬高，默認 0
                padding: 2,
                // 是否以時間戳爲文件名生成新的雪碧圖文件，若是啓用請注意清理以前生成的文件，默認不生成新文件
                newsprite: false,
                // 版本號 ver 未設置時，是否給雪碧圖追加時間戳，默認不追加
                spritestamp: true,
                // 在CSS文件末尾追加時間戳，默認不追加
                cssstamp: false,
                // 默認使用二叉樹最優排列算法
                algorithm: 'binary-tree',
                // 默認使用`pngsmith`圖像處理引擎
                engine: 'pngsmith',

                //版本號
                ver:new Date().toISOString().replace(/\D/g,'')
            },
            autoSprite: {
                files: [{
                    expand: true,
                    cwd: 'public/src/sass-css/',
                    src: '**/*.css',
                    dest: 'public/src/css/',
                    ext: '.css'
                }]
            }
        },
        
        imagemin: {
            dynamic: {
                options: {
                    optimizationLevel: 3 // png圖片優化水平，3是默認值，取值區間0-7
                },
                files: [
                    {
                        expand: true,
                        cwd: "public/src/css/img/",  //只壓縮 sprite產生的合併圖片
                        src: "**/*.png",
                        dest: "public/src/css/img/"
                    }
                ]
            }
        },

        clean: {
            sassCss:{
                src:["public/src/sass-css/*"]
            },
            css: {
                src: ['public/src/css/*']
            },
            js:{
                src:['public/dist/js/*']
            }
        },
        copy: {
            font: {
                expand: true,
                cwd: 'public/src/font',
                src: '**',
                dest: 'public/font'
            },
            css: {
                expand: true,
                cwd: 'public/src/css/',
                src: '**',
                dest: 'public/dist/css/'
            }
        },

        babel: {
            options: {
                presets: ['env'],//the same as latest,including es2015，es2016，es2017 plugins
                plugins: ["transform-es2015-modules-amd"],//import file translate to amd module
                sourceMap: true
            },
            files: {
                expand: true,
                cwd: 'public/src/babel/es6/', //just a test  now
                src: ['**/*.js'],
                dest: 'public/src/babel/es5/'
            }
        },

        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                sourceMap: true,
                mangle: false, //不混淆變量名
                comments: 'some' //保留 @preserve @license @cc_on等註釋
            },
            build: {
                files:[{
                    expand: true,
                    cwd: 'public/src/js',
                    src: '**/*.js',
                    dest: 'public/dist/js',
                    ext: '.js', 
                    extDot: 'last'
                }]
            }
        },

        requirejs: {
            build: {
                options : {
                    optimize:'none',   //指定壓縮工具,none 不壓縮
                    baseUrl : 'public/dist/js',//在壓縮後的模塊上進行文件合併
                    mainConfigFile: 'public/dist/js/require.config.js', 
                    dir:"public/dist/js",//輸出文件夾
                    keepBuildDir:true,//構建過程當中勿刪除重建dir文件夾
                    allowSourceOverwrites:true,//dir文件夾與源文件夾相同時容許重寫構建前的文件
                    removeCombined: false,
                    findNestedDependencies:false,
                    optimizeCss:'none',
                    modules:[
                        {
                            /******
                            該合併後的模塊幾乎在每一個頁面都使用到,將做爲公用模塊，請確保該模塊先於頁面js文件引入，避免重複加載已合併的文件,
                            因爲requirejs模塊默認加載沒有順序，該模塊置入 views/component/foot.ejs，少數未引用foot的頁面請單獨處理,
                            page/head.js 不是使用 require 的模塊或其依賴引入,請聲明爲具名模塊(define("page/head",[xxx,xxx],function(){}))以免開發模式下模塊未合併時報錯
                            *********/
                            name:"page/head",
                            create: false
                        },
                        {
                            name:'ui/ui',
                            include:["ui/ux","ui/ejs","ui/tpl"],
                            exclude:["jquery","pin","request"],
                            create: false
                        },
                        {
                            name:'highstock',
                            include:["raphael","chart/maps/chinaMap"],
                            exclude:["jquery"],
                            create: false
                        },
                        {
                            name:"common/common",
                            include:["jquery","pin","request","common/common","common/gapageview"],
                            excludeShallow:["ui/ux","ui/ejs","ui/tpl"],
                            create: false
                        },
                        {
                            name:'page/analyze/analyze_report',
                            include:['page/analyze/report/step1','page/analyze/report/step2Major','page/analyze/report/step2Sch'],
                            exclude:["jquery","pin","request","ui/ux","ui/ejs","ui/tpl","common/common","page/head"],
                            create: false
                        },
                        {
                            name:'page/zhiyuan/zhiyuan',
                            include:["page/zhiyuan/list/selectArea","widget/page","common/fixBottom"],
                            exclude:["jquery","pin","request","ui/ux","ui/ejs","ui/tpl","common/common","page/head"],
                            create: false
                        }
                    ]
                }
            }
        },

        watch: {
            options: {
                spawn:true,
                interrupt:true,
                debounceDelay: 250
            },
            sass:{
                files: 'public/src/sass/**/*.scss',
                tasks: [/*"clean:sassCss",*/"clean:css","compass","sprite"]
            },
            babel:{
                files:'public/src/babel/es6/**/*.js',
                tasks:['babel']
            }
        }

    });

    


    // 加載任務的插件
    //css
    //node-compass requires compass and ruby gem , install ruby then install compass via gem
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-contrib-cssprite');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');

    //js
    grunt.loadNpmTasks('grunt-babel');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-requirejs');

    //watch
    grunt.loadNpmTasks('grunt-contrib-watch');


    //開發期的編譯任務
    grunt.registerTask('default', [
        "clean:sassCss",
        "clean:css",
        "compass",
        "sprite",
        "babel"
        ]);


    //開發中監控,自動編譯 (有點頻繁 酌情開啓)
    grunt.registerTask('watcher',['watch']);


    //壓縮及發佈
    grunt.registerTask('dist',["imagemin","copy","clean:js","uglify","requirejs"]);


    //test task
    grunt.registerTask('test',[/*"clean:js","uglify",*/"requirejs"]);
}

package.json vue

 "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-babel": "^7.0.0",
    "grunt-contrib-clean": "~0.4.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-cssprite": "~0.1.3",
    "grunt-contrib-imagemin": "~2.0.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-requirejs": "^1.0.0",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "~1.0.0",
    "grunt-contrib-compass": "~0.7.2"
  }