zoukankan      html  css  js  c++  java
  • grunt中调用webpack

    项目中一些很老的技术需要运用webpack管理,这时候必须使用grunt+webpack 配合使用 。做个笔记,不限多说直接上代码

    grunt结合webpack

    下面是 Gruntfile.js

      1 const path = require('path')
      2 const fs = require('fs');
      3 const webpack = require("./webpack.config.js");
      4 const destuglifyls = ['dest/limsStyle/equation.js', 'dest/limsStyle/guidance.js', 'dest/limsStyle/postil.js', 'dest/limsStyle/inject.js', 'dest/limsStyle/designTemp.js'];
      5 const srcbabells = ['limsStyle/postil.js', 'limsStyle/equation.js', 'limsStyle/guidance.js', 'limsStyle/inject.js', 'limsStyle/designTemp.js'];
      6 const srcjshint = ['src/limsStyle/postil.js', 'src/limsStyle/equation.js', 'src/limsStyle/guidance.js', 'src/limsStyle/inject.js', 'src/limsStyle/designTemp.js'];
      7 
      8 module.exports = function (grunt) {
      9   grunt.registerTask('setapi', 'setapi..', function (arg1, arg2) {
     10     var RouteMapLibPath = './dest/limsStyle/RouteMapLib-1.1.js';
     11     var editConfigPath = './dest/lib/ueditor1_4_3-utf8-net/config.js';
     12     var data = fs.readFileSync('./dest/limsStyle/config.json');
     13 
     14     var RouteMapLib = fs.readFileSync(RouteMapLibPath).toString();
     15     var editConfigContent = fs.readFileSync(editConfigPath).toString();
     16     data = JSON.parse(data);
     17     if (typeof arg1 != 'undefined') {
     18       switch (arg1) {
     19         case 'dev':
     20           {
     21             replaceConfig(data.devconfig)
     22           };
     23           break;
     24         case 'test':
     25           {
     26             replaceConfig(data.testconfig)
     27           };
     28           break;
     29         case 'build':
     30           {
     31             replaceConfig(data.buildconfig)
     32           };
     33           break;
     34       }
     35     } else {
     36       replaceConfig(data.location)
     37     }
     38     fs.writeFileSync(RouteMapLibPath, RouteMapLib);
     39     fs.writeFileSync(editConfigPath, editConfigContent);
     40 
     41     function replaceConfig(d) {
     42       RouteMapLib = RouteMapLib.replace('{#ajaxUrl}', d.ajaxUrl);
     43       RouteMapLib = RouteMapLib.replace('{#user_token}', d.user_token);
     44       RouteMapLib = RouteMapLib.replace('{#ELNEdit}', d.ELNEdit);
     45       editConfigContent = editConfigContent.replace('{#server}', d.ajaxUrl.replace('API/', ''));
     46       // console.log(RouteMapLib);
     47     };
     48 
     49   });
     50 
     51 
     52   grunt.initConfig({
     53     clean: ['/dest'],
     54     jshint: {
     55       all: srcjshint,
     56       options: {
     57         jshintrc: '.jshintrc'
     58         // globals: {
     59         //   $: false,
     60         //   jQuery: false
     61         // },
     62         // browser: true,
     63         // laxcomma:true,
     64         // esversion: 6
     65       }
     66     },
     67     webpack: {
     68       options: {
     69         stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
     70       },
     71       dev: webpack
     72     },
     73     // webpack: {
     74     //   options: {
     75     //     stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
     76     //   },
     77     //   prod: webpack,
     78     //   dev: Object.assign({
     79     //     watch: true
     80     //   }, webpack)
     81     // },
     82     watch: {
     83       cwd: 'src',
     84       files: ['src/**/*.js', 'src/**/*.json', 'src/**/*.html', 'src/limsStyle/*.css', 'src/**/*.less'],
     85       tasks: ['webpack:dev','copy:main', 'setapi', 'jshint', 'babel'],
     86       options: {
     87         reload: true,
     88         livereload: 35729
     89       }
     90     },
     91     uglify: {
     92       main: {
     93         files: [{
     94           expand: true,
     95           src: destuglifyls,
     96           // dest: 'dest',
     97           sourceMap: true,
     98           rename: function (dst, src) {
     99             // To keep the source js files and make new files as `*.min.js`:
    100             // return dst + '/' + src.replace('.js', '.min.js');
    101             // Or to override to src:
    102             return src;
    103           }
    104         }]
    105       },
    106     },
    107     cssmin: {
    108       target: {
    109         files: [{
    110           expand: true,
    111           cwd: 'src/limsStyle',
    112           src: ['*.css'],
    113           dest: 'dest/limsStyle'
    114         }]
    115       }
    116     },
    117     copy: {
    118       processContentExclude: ['othen/**'],
    119       main: {
    120         expand: true,
    121         cwd: 'src',
    122         //src: ['**', '!*.sln', '!**lib/diff/**', '!**lib/layer-v3.1.1/**', '!**lib/layerdate/**', '!**.vs/**', '!**lib/bootstrap-3.3.7-dist/**', '!**lib/ueditor1_4_3-utf8-net/third-party/**', '!**lib/ueditor1_4_3-utf8-net/third-party/dialogs/**'], //** 
    123         src: ['limsStyle/**', 'othen/**', '_temp/**', 'images/**', 'layertemplate/**', 'ElnIndex.html', 'designTemplate.html'],
    124         dest: 'dest/',
    125         flatten: false,
    126         filter: 'isFile'
    127       },
    128       all: {
    129         expand: true,
    130         cwd: 'src',
    131         src: ['**'], //** 
    132         dest: 'dest/',
    133         flatten: false,
    134         filter: 'isFile'
    135       }
    136     },
    137     babel: {
    138       options: {
    139         sourceMap: true,
    140         presets: ['babel-preset-es2015']
    141 
    142       },
    143       dist: {
    144         files: [{
    145           expand: true,
    146           cwd: 'src/',
    147           src: srcbabells,
    148           dest: 'dest/'
    149         }]
    150       }
    151     },
    152     connect: {
    153       options: {
    154         port: 9000,
    155         hostname: 'localhost',
    156         livereload: 35729
    157       },
    158       server: {
    159         options: {
    160           open: true,
    161           base: [
    162             "dest"
    163           ]
    164         }
    165       }
    166     },
    167   });
    168 
    169   grunt.loadNpmTasks('grunt-contrib-uglify');
    170   grunt.loadNpmTasks('grunt-contrib-jshint');
    171   grunt.loadNpmTasks('grunt-contrib-copy');
    172   grunt.loadNpmTasks('grunt-contrib-clean');
    173   grunt.loadNpmTasks('grunt-contrib-watch');
    174   grunt.loadNpmTasks('grunt-contrib-connect');
    175   grunt.loadNpmTasks('grunt-babel');
    176   grunt.loadNpmTasks('grunt-contrib-cssmin');
    177   grunt.loadNpmTasks('grunt-webpack');
    178   // grunt.registerTask('clean', ['clean:release', 'copy:all']);
    179 
    180 
    181   grunt.registerTask('default', ['copy:main', 'webpack:dev', 'babel', 'cssmin', 'uglify', 'setapi', 'connect', 'watch']); //'uglify', 
    182   grunt.registerTask('dev', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:dev'])
    183   grunt.registerTask('test', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:test']);
    184   grunt.registerTask('build', ['copy:all', 'babel', 'cssmin', 'uglify', 'setapi:build']);
    185 };

    下面是 webpack.config.js文件夹

     1 const path = require('path')
     2 const webpack = require('webpack')
     3 const HtmlWebpackPlugin = require('html-webpack-plugin')
     4 const loaderconfig = require('./vue-loader.conf')
     5 const VueLoaderPlugin = require('vue-loader/lib/plugin')
     6 // const packagejson = require('./package.json')
     7 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
     8 
     9 module.exports = {
    10     entry: './src/vuesrc/main.js',
    11     output: {
    12         path: path.resolve(__dirname, './src/limsStyle/vuedest/'),
    13         filename: 'build.js',
    14         chunkFilename: "[id].build.js?[chunkhash]"
    15         // vendor: Object.keys(packagejson.dependencies)
    16     },
    17     devtool: '#eval-source-map',
    18     module: {
    19         rules: [{
    20                 test: /.vue$/,
    21                 loader: 'vue-loader',
    22                 options: loaderconfig
    23             },
    24             {
    25                 test: require.resolve('jquery'),
    26                 use: [{
    27                     loader: 'expose-loader',
    28                     options: 'jQuery'
    29                 }, {
    30                     loader: 'expose-loader',
    31                     options: '$'
    32                 }]
    33             }
    34         ]
    35     },
    36     resolve: {
    37         extensions: [' ', '.js', '.vue'],
    38         // root:"./node_modules",
    39         alias: {
    40             'vue$': 'vue/dist/vue.js'
    41         }
    42     },
    43     optimization: {
    44         splitChunks: {
    45             chunks: 'async',
    46             minSize: 10000,
    47             maxSize: 0,
    48             minChunks: 1,
    49             maxAsyncRequests: 5,
    50             maxInitialRequests: 3,
    51             automaticNameDelimiter: '~',
    52             name: true,
    53             cacheGroups: {
    54                 vendors: {
    55                     test: /[\/]node_modules[\/]/,
    56                     priority: -10,
    57                     name: "vendors"
    58                 },
    59                 default: {
    60                     minChunks: 2,
    61                     priority: -20,
    62                     reuseExistingChunk: true
    63                 }
    64             }
    65         },
    66         runtimeChunk: {
    67             name: entrypoint => `manifest.${entrypoint.name}`
    68         }
    69     },
    70     plugins: [
    71         new HtmlWebpackPlugin({
    72             filename: 'design.html',
    73             template: './src/vuesrc/index.html',
    74             inject: true,
    75             minify: {
    76                 removeComments: true,
    77                 collapseWhitespace: true,
    78                 removeAttributeQuotes: true
    79                 // more options:
    80                 // https://github.com/kangax/html-minifier#options-quick-reference
    81             },
    82             // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    83             chunksSortMode: 'dependency'
    84         }),
    85         new VueLoaderPlugin(),
    86         // new BundleAnalyzerPlugin()
    87     ]
    88 }
  • 相关阅读:
    Redis源码分析(三十四)--- redis.h服务端的实现分析(1)
    Redis源码分析(三十四)--- redis.h服务端的实现分析(1)
    Redis源码分析(三十三)--- redis-cli.c客户端命令行接口的实现(2)
    C# 接口
    C#属性有什么作用
    字节跳动面试总结
    大厂Redis高并发场景设计,面试问的都在这!
    上班摸鱼 手敲求水仙花数的代码!
    有一群志同道合的程序员朋友是怎样的体验?
    SpringBoot四大核心之自动装配——源码解析
  • 原文地址:https://www.cnblogs.com/sxmny/p/10775258.html
Copyright © 2011-2022 走看看