npm - 用 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 文件集新任务名为 丑化 :

"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命令并传递“压缩”( -c )标志。