ES6 与 commonjs 与 gulp

从《hexo minifier gulp 压缩博客》到对 ES6 的研究

对之前的“压缩博客”中提到的 gulpfile 改造的过程中加入了 imagemin 但从7.0.1后其不再支持commonjs语法。^[1]
但我就想用最新版本，开始改造后找各种资料从零开始了解js语法规范。
经过各种尝试终于有一次返回了详细的解决方法而不是错误代码让我自己去找。

zhaosn@collei:~/Documents/Blog$ gulp
file:///home/zhaosn/Documents/Blog/gulpfile.mjs:4
import {uglify} from 'gulp-uglify-es';//https://gitlab.com/itayronen/gulp-uglify-es
        ^^^^^^
SyntaxError: Named export 'uglify' not found. The requested module 'gulp-uglify-es' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'gulp-uglify-es';
const {uglify} = pkg;

zhaosn@collei:~/Documents/Blog$ gulp
file:///home/zhaosn/Documents/Blog/gulpfile.mjs:4
import {plugin as uglify} from 'gulp-uglify-es';//https://gitlab.com/itayronen/gulp-uglify-es
        ^^^^^^
SyntaxError: Named export 'plugin' not found. The requested module 'gulp-uglify-es' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'gulp-uglify-es';
const {plugin: uglify} = pkg;

原代码片段：

import imagemin, {gifsicle, mozjpeg, optipng, svgo} from 'gulp-imagemin';
import gulp from 'gulp';
import cleancss from 'gulp-clean-css';
import {uglify} from 'gulp-uglify-es';//https://gitlab.com/itayronen/gulp-uglify-es
import htmlmin from 'gulp-html-minifier-terser';

上个博文里用的 require 全改成了 import ，下面的 gulp.task 都没改。uglify 之前是 require().default 的形式，事出反常，上网找后参考^[2]添加了花括号。
然后边改边试，改到不报错大概就成功了呗，于是我开始乱试。
最后我使用了以下代码的「片段」成功了，我注释掉了uglify因为我不知该怎样适配其后的”.default”

import imagemin, {gifsicle, mozjpeg, optipng, svgo} from 'gulp-imagemin';
import gulp from 'gulp';
import cleancss from 'gulp-clean-css';
//let uglify = require('gulp-uglify-es').default;//https://gitlab.com/itayronen/gulp-uglify-es
import htmlmin from 'gulp-html-minifier-terser';
// 压缩public目录下的图片
//https://github.com/sindresorhus/gulp-imagemin
gulp.task('minify-images', () => {
    return gulp.src(['./public/img/*.jpg','./public/img/*.png'])
        .pipe(imagemin([
            mozjpeg({quality: 75, progressive: true}),
	    optipng({optimizationLevel: 5})
        ]))
        .pipe(gulp.dest('./public'))
});

执行结果发现图片压缩需要大量时间但也没多少成果，所以这份研究没那么有意义

zhaosn@collei:~/Documents/Blog$ gulp 
[05:51:02] Using gulpfile ~/Documents/Blog/gulpfile.mjs
[05:51:02] Starting 'default'...
[05:51:02] Starting 'minify-css'...
[05:51:02] Starting 'minify-html'...
[05:51:02] Starting 'minify-images'...
[05:51:06] Finished 'minify-css' after 3.92 s
[05:51:38] Finished 'minify-html' after 37 s
[05:53:40] gulp-imagemin: Minified 7 images (saved 1.72 MB - 41.1%)
[05:53:40] Finished 'minify-images' after 2.63 min
[05:53:40] Finished 'default' after 2.63 min

需要注意我将gulpfile文件后缀改为了”.mjs”，理论上这样会使hexo以es6语法读取这个文件

1. https://github.com/imagemin/imagemin/issues/380 ↩
2. https://es6.ruanyifeng.com/#docs/module ↩