index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. /**
  2. * https://github.com/NMFR/optimize-css-assets-webpack-plugin
  3. * MIT LICENSE
  4. */
  5. var _ = require('underscore')
  6. var webpackSources = require('webpack-sources')
  7. function OptimizeCssAssetsPlugin(options) {
  8. options = options || {}
  9. this.options = Object.assign({
  10. canPrint: undefined,
  11. cssProcessor: require('cssnano'),
  12. assetNameRegExp : /\.css$/g,
  13. cssProcessorOptions : {
  14. safe: true,
  15. zindex: false,
  16. autoprefixer: false
  17. }
  18. }, options)
  19. };
  20. OptimizeCssAssetsPlugin.prototype.print = function() {
  21. if (this.options.canPrint || (typeof this.options.canPrint === 'undefined' && (process.env.NODE_ENV === 'production' || process.env.__VUX_BUILD__))) {
  22. console.log.apply(console, arguments);
  23. }
  24. };
  25. OptimizeCssAssetsPlugin.prototype.processCss = function(css) {
  26. return this.options.cssProcessor.process(css, this.options.cssProcessorOptions)
  27. };
  28. OptimizeCssAssetsPlugin.prototype.createCssAsset = function(css, originalAsset) {
  29. return new webpackSources.RawSource(css);
  30. };
  31. OptimizeCssAssetsPlugin.prototype.apply = function(compiler) {
  32. var self = this;
  33. compiler.plugin('emit', function(compilation, compileCallback) {
  34. self.print('\n\n======== vux-loader: duplicate-style start~ ========')
  35. self.print('Starting to optimize CSS...')
  36. var assets = compilation.assets;
  37. var cssAssetNames = _.filter(
  38. _.keys(assets),
  39. function(assetName) {
  40. return assetName.match(self.options.assetNameRegExp)
  41. }
  42. );
  43. var hasErrors = false;
  44. var promises = [];
  45. _.each(
  46. cssAssetNames,
  47. function(assetName) {
  48. self.print('Processing ' + assetName + '...')
  49. var asset = assets[assetName];
  50. var originalCss = asset.source();
  51. // avoid 0% => 0
  52. originalCss = originalCss.replace(/:\s*0%/g, ':1234%')
  53. var promise = self.processCss(originalCss)
  54. promise.then(
  55. function (result) {
  56. if (hasErrors) {
  57. self.print('Skiping ' + assetName + ' because of an error.')
  58. return;
  59. }
  60. var processedCss = result.css;
  61. // replace back to 0%
  62. processedCss = processedCss.replace(/:1234%/g, ':0%')
  63. assets[assetName] = self.createCssAsset(processedCss, asset);
  64. var ratio = ''
  65. if (originalCss.length) {
  66. ratio = ', ratio:' + (Math.round(((processedCss.length * 100) / originalCss.length) * 100) / 100) + '%'
  67. }
  68. self.print('Processed ' + assetName + ', before: ' + originalCss.length + ', after: ' + processedCss.length + ratio)
  69. }, function(err) {
  70. hasErrors = true;
  71. self.print('Error processing file: ' + assetName)
  72. console.error(err)
  73. }
  74. );
  75. promises.push(promise)
  76. }
  77. );
  78. Promise.all(promises).then(function () {
  79. compileCallback()
  80. self.print('======== vux-loader: duplicate-style done! ========\n')
  81. }, compileCallback)
  82. })
  83. }
  84. module.exports = OptimizeCssAssetsPlugin