Question

目前我使用npm进行包管理，使用Gulp进行运行任务。我想知道我是否能够使用npm脚本替换 gulp并仅使用npm。

我的gulpfile.js for uglifying看起来如下

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/）开始，应用＆＃34; mangle＆＃34;命令（-m标志），并将结果输出到dist/js/app.js。

要创建dist/js/app.js的压缩版本，我们会链接另一个uglifyjs命令并传递＆＃34; compress＆＃34; （-c）旗帜。

用npm脚本替换uglify的Gulp任务

1 个答案: