• grunt构建

     构建工具

            构建工具是对 JS、CSS、HTML、LESS、IMG 等资源文件进行合并压缩构建到最后实现自动化构建项目。
        最流行的三种自动化构建工具: Grunt, Gulp, webpack。
        简化项目构建，自动完成构建。

       

        grunt自动化构建工具，一个基于nodeJs的命令行工具；
        任务运行器, 有丰富的插件；
                常用功能:
                    合并文件(js/css)
                    压缩文件(js/css)
                    语法检查(js)
                    less/sass预编译处理

     链接地址：

            中文：http://www.gruntjs.net/(中文官网)
            教程：http://www.cnblogs.com/wangfupeng1988/p/4561993.html(教程)

    项目结构：

            |- build
            |- src
                |- js
                |- css
            |- index.html
            |- Gruntfile.js
            |- package.json

     grunt配置文件流程：Gruntfile.js

    1、初始化插件配置（初始化）
    2、加载插件任务（加载）
    3、注册构建任务（注册）

    1. module.exports = function(grunt){
    2.  
    3.     grunt.initConfig({
    4.             
    5.     });
    6.  
    7.     grunt.loadNpmTasks('grunt-contrib-concat');
    8.  
    9.     grunt.registerTask('default', []);
    10.  
    11. };

     * 常用的插件:

            * grunt-contrib-clean——清除文件(打包处理生成的)
            * grunt-contrib-concat——合并多个文件的代码到一个文件中
            * grunt-contrib-uglify——压缩js文件
            * grunt-contrib-jshint——javascript语法错误检查；
            * grunt-contrib-cssmin——压缩/合并css文件
            * grunt-contrib-htmlmin——压缩html文件
            * grunt-contrib-imagemin——压缩图片文件(无损)
            * grunt-contrib-copy——复制文件、文件夹
            * grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

     完整配置（Gruntfile.js）：

    1. module.exports = function(grunt) {
    2.  
    3.     grunt.initConfig({
    4.  
    5.         concat: {
    6.  
    7.             options: {
    8.  
    9.                 separator: ';',
    10.  
    11.             },
    12.  
    13.             dist: {
    14.  
    15.                 src: ['src/js/*.js'],
    16.  
    17.                 dest: 'dist/js/built.js',
    18.  
    19.             },
    20.  
    21.         },
    22.  
    23.         pkg: grunt.file.readJSON('package.json'),
    24.  
    25.         uglify: {
    26.  
    27.             options: {
    28.  
    29.                 banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
    30.  
    31.                     '<%= grunt.template.today("yyyy-mm-dd") %> */'
    32.  
    33.             },
    34.  
    35.             target: {
    36.  
    37.                 files: {
    38.  
    39.                     'dist/js/built.min.js': ['dist/js/built.js']
    40.  
    41.                 }
    42.  
    43.             }
    44.  
    45.         },
    46.  
    47.         babel: {
    48.  
    49.             options: {
    50.  
    51.                 sourceMap: true,
    52.  
    53.                 presets: ['@babel/preset-env'] // '@babel/preset-env'
    54.  
    55.             },
    56.  
    57.             dist: {
    58.  
    59.                 files: {
    60.  
    61.                     'dist/js/built.js': 'src/js/*.js'
    62.  
    63.                 }
    64.  
    65.             }
    66.  
    67.         },
    68.  
    69.         jshint: {
    70.  
    71.             options: {
    72.  
    73.                 jshintrc: '.jshintrc'
    74.  
    75.             },
    76.  
    77.             build: ['Gruntfile.js', 'src/js/*.js']
    78.  
    79.         },
    80.  
    81.         cssmin: {
    82.  
    83.             options: {
    84.  
    85.                 shorthandCompacting: false,
    86.  
    87.                 roundingPrecision: -1
    88.  
    89.             },
    90.  
    91.             build: {
    92.  
    93.                 files: {
    94.  
    95.                     'dist/css/built.min.css': ['src/css/*.css']
    96.  
    97.                 }
    98.  
    99.             }
    100.  
    101.         },
    102.  
    103.         watch: {
    104.  
    105.             scripts: {
    106.  
    107.                 files: ['src/js/*.js', 'src/css/*.css'],
    108.  
    109.                 tasks: ['concat', 'jshint', 'uglify', 'cssmin'],
    110.  
    111.                 options: { spawn: false }
    112.  
    113.             }
    114.  
    115.         }
    116.  
    117.     });
    118.  
    119.  
    120.  
    121.     // js合并
    122.  
    123.     grunt.loadNpmTasks('grunt-contrib-concat');
    124.  
    125.     // js压缩
    126.  
    127.     grunt.loadNpmTasks('grunt-contrib-uglify');
    128.  
    129.     // babel es转换
    130.  
    131.     grunt.loadNpmTasks('grunt-babel');
    132.  
    133.     // 语法检查
    134.  
    135.     grunt.loadNpmTasks('grunt-contrib-jshint');
    136.  
    137.     // css合并压缩
    138.  
    139.     grunt.loadNpmTasks('grunt-contrib-cssmin');
    140.  
    141.     // 监听
    142.  
    143.     grunt.loadNpmTasks('grunt-contrib-watch');
    144.  
    145.  
    146.  
    147.     // 注册构建任务
    148.  
    149.     grunt.registerTask('default', ['concat', 'uglify', 'babel', 'jshint', 'cssmin']);
    150.  
    151.     grunt.registerTask('myWatch', ['default', 'watch']);
    152.  
    153.  
    154.  
    155. };

    .jshintrc jshint配置文件：

    1. {
    2.     "curly": true,
    3.     "eqeqeq": true,
    4.     "eqnull": true,
    5.     "expr": true,
    6.     "immed": true,
    7.     "newcap": true,
    8.     "noempty": true,
    9.     "noarg": true,
    10.     "regexp": true,
    11.     "browser": true,
    12.     "devel": true,
    13.     "node": true,
    14.     "boss": false,
    15.     "esversion": 6,
    16.     "undef": true,
    17.     "asi": false,
    18.     "predef": ["define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
    19. }

  • 相关阅读:
    spring配置数据源
    ModelSim_10.5se软件安装
    Java实现手动操作定时任务功能的简单例子（动态创建定时任务）
    [漏洞分析] CVE-2022-2588 route4 double free内核提权
    map reduce案例超详细讲解
    Unity的WebGL平台动态加载glb/gltf测试
    java二手车交易平台计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
    English note 2
    Websocket获取B站直播间弹幕教程——第二篇、解包/拆包
    旋转倒立摆的起摆与稳摆---QYC
  • 原文地址：https://blog.csdn.net/qq_39683070/article/details/127417620