1

第一、文件夹:
static/js

请输入图片描述

static/js/build/
请输入图片描述

static/js/dist/
请输入图片描述

static/js/lib/
请输入图片描述

static/js/modules/
请输入图片描述

第二、static/js/build/Gruntfile.js

/*
* grunt
* http://gruntjs.com/
*
* Copyright (c) 2012 "Cowboy" Ben Alman
* Licensed under the MIT license.
* https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT
*/

module.exports = function(grunt){

     var script = require('grunt-cmd-transport/tasks/lib/script').init(grunt);

     grunt.loadNpmTasks('grunt-cmd-transport');
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-clean');

     var alias = {
               'jquery': 'lib/jquery/1.7.2/jquery-1.7.2.min-cmd.js',
               'underscore': 'lib/underscore/underscore-min-cmd.js',
               //'highcharts':'lib/highcharts/highcharts-cmd.js',
               'highstock':'lib/highstock/highstock-cmd.js',
               "more": 'lib/more/highcharts-more-cmd.js',
               "knockout": 'lib/knockout/3.0.0/knockout-3.0.0-cmd.js',
               'validate': 'lib/validate/jquery.validate.min-cmd.js',
               'nuit':'lib/nuit/nuit.min-cmd.js'
     };

     var preload = ['jquery', 'underscore', 'highstock', 'more', 'knockout', 'validate', 'nuit'];

    function getFilePathByAlias(files, baseUrl) {
        return files.map(function(file) {
            return baseUrl + alias[file];
        });
    }

     grunt.initConfig({
          clean: ['tmp/**'],
          transport: {
               options: {
                parsers: {
                   // '.tpl': [text.html2jsParser],
                    '.js': [script.jsParser]
                },
                alias: alias,
                include: 'all',
                debug: false,
                paths: ['../modules', '../']
            },
            modules: {
                options: {
                   // idleading: '../modules/'
                idleading: '/AbnormalDetect/static/js/modules/'

                },
                files: [{
                    cwd: '../modules',
                    src: '**',
                    filter: 'isFile',
                    expand: true,
                    dest: 'tmp/modules'
                }]
            },
            lib: {
                options: {
                   //  idleading: '../lib/'
                    idleading: '/AbnormalDetect/static/js/lib/'

                },
                files: [{
                    cwd: '../lib',
                    src: '**',
                    filter: 'isFile',
                    expand: true,
                    dest: 'tmp/lib'
                }]
            }
          },
          concat: {
            abnormal: {
                src: ['tmp/modules/abnormal/**'],
                filter: function(filepath) {

                    return /\.js$/i.test(filepath);
                },
                dest: '../dist/abnormal.js'
            },
               measure: {
                src: ['tmp/modules/measure/**'],
                filter: function(filepath) {

                    return /\.js$/i.test(filepath);
                },
                dest: '../dist/measure.js'
            },
            lib: {
                src: getFilePathByAlias(preload, './tmp/'),
                filter: function(filepath) {
                    return /\.js$/i.test(filepath);
                },
                dest: '../dist/lib.js'
            }
        },
          uglify: {
            lib: {
                src: ['../dist/lib.js'],
                dest: '../dist/lib.min.js'
            }
        }
     });

     grunt.registerTask('default', ['clean', 'transport', 'concat',  'uglify', 'clean']);
};

第三、index.html

<script type="text/javascript" src="static/js/lib/seajs/2.2.1/sea.js"  id="seajsnode"></script>
<script type="text/javascript">
     seajs.config({
          alias: {
               'jquery': 'lib/jquery/1.7.2/jquery-1.7.2.min-cmd.js',
               'underscore': 'lib/underscore/underscore-min-cmd.js',
               'highcharts':'lib/highcharts/highcharts-cmd.js',
               'highstock':'lib/highstock/highstock-cmd.js',
               "more": 'lib/more/highcharts-more-cmd.js',
               "knockout": 'lib/knockout/3.0.0/knockout-3.0.0-cmd.js',
               'validate': 'lib/validate/jquery.validate.min-cmd.js',
               'nuit':'lib/nuit/nuit.min-cmd.js'
          },
          base: '/AbnormalDetect/static/js/modules/',
          paths: {
             'modules': '/AbnormalDetect/static/js/modules',
             'lib': '/AbnormalDetect/static/js/lib',
             'dist': '/AbnormalDetect/static/js/dist'
         },
         // 如果没有grunt,有改动就把preload注释掉
         preload: ['/AbnormalDetect/static/js/dist/lib.min.js', '/AbnormalDetect/static/js/dist/abnormal.js']
     });
     seajs.use("abnormal/main/main");
</script>

需要安装的:
node js
grunt js
grunt-cmd-transport
grunt-contrib-concat
grunt-contrib-uglify
grunt-contrib-clean

遇到的问题及解决方法:

  1. seajs 2.3.0 版本没有preload功能
    具体看:https://github.com/seajs/seajs/issues/713,
    所以需要preload功能需要加载2.1.1版本

  2. 安装grunt-contrib-uglify遇到 Error: No compatible version found: uglify-js@'^2.4.0'问题
    https://github.com/npm/npm/issues/4833
    npm 版本过低,重新安装node js, grunt js 可以解决,或者更新npm


小渝人儿
1.1k 声望849 粉丝

前端工程师


引用和评论

0 条评论