用 npm 脚本替换 uglify 的 Gulp 任务

Question

目前我npm用于包管理和Gulp运行任务。我想知道是否可以使用 npm 脚本替换gulp 并仅使用 npm。

我的 gulpfile.js 丑化看起来如下

var uglify = require('gulp-uglify');

// Minify JS
gulp.task('minify-js', function() {
 return gulp.src('js/agency.js')
 .pipe(uglify())
 .pipe(header(banner, { pkg: pkg }))
 .pipe(rename({ suffix: '.min' }))
 .pipe(gulp.dest('js'))
 .pipe(browserSync.reload({
 stream: true
 }))
});

有没有办法在 npm 中编写等效的脚本？

Answer 1

首先，我建议你有两个目录src和dist.

• src在进行任何缩小之前包含原始代码，它用于阅读和编辑您的代码。
  
• dist代表分发并包含代码的缩小和连接版本，它用于生产站点。

第1步

您可以使用uglify-js来组合和缩小您的 JavaScript 文件。

使用以下命令安装它：
npm install --save-dev uglify-js

第2步

在您的package.json文件中设置名为uglify 的新任务：

"scripts": {
  ...
  "uglify": "mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js"
}

解释

此任务的前半部分mkdir -p dist/js创建一个文件夹结构 ( mkdir)，但前提是它不存在 (-p标志)。成功完成后，运行uglifyjs命令。将&&让您连锁多个命令在一起，依次运行每一个如果前一个命令成功完成。

此任务的后半部分告诉uglifyjs从 中的所有 JS 文件 ( *.js) 开始src/js/，应用“mangle”命令（-m标志），并将结果输出到dist/js/app.js.

为了创建一个压缩版本，dist/js/app.js我们链接另一个uglifyjs命令并传递“compress”( -c) 标志。