gpt4 book ai didi

gulp - 使用 Gulp 来连接和 Uglify 文件

转载 作者:行者123 更新时间:2023-12-03 04:36:31 24 4
gpt4 key购买 nike

我正在尝试使用 Gulp 来:

  1. 获取 3 个特定的 javascript 文件,将它们连接起来,然后将结果保存到文件 (concat.js)
  2. 获取这个串联文件并对其进行 uglify/minify,然后将结果保存到另一个文件 (uglify.js)

到目前为止我有以下代码

    var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_uglify = require('gulp-uglify');

gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('js'));
});

gulp.task('default', ['js-fef'], function(){});

但是,uglify 操作似乎不起作用,或者由于某种原因未生成文件。

我需要做什么才能实现这一点?

最佳答案

事实证明,我需要使用gulp-rename,并在“丑化”之前先输出串联文件。代码如下:

var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify');

gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('uglify.js'))
.pipe(gp_uglify())
.pipe(gulp.dest('dist'));
});

gulp.task('default', ['js-fef'], function(){});

来自grunt,一开始有点令人困惑,但现在很有意义。我希望它能帮助gulp菜鸟。

而且,如果您需要源映射,这里是更新的代码:

var gulp = require('gulp'),
gp_concat = require('gulp-concat'),
gp_rename = require('gulp-rename'),
gp_uglify = require('gulp-uglify'),
gp_sourcemaps = require('gulp-sourcemaps');

gulp.task('js-fef', function(){
return gulp.src(['file1.js', 'file2.js', 'file3.js'])
.pipe(gp_sourcemaps.init())
.pipe(gp_concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(gp_rename('uglify.js'))
.pipe(gp_uglify())
.pipe(gp_sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});

gulp.task('default', ['js-fef'], function(){});

参见gulp-sourcemaps有关选项和配置的更多信息。

更新 - 2022 年 2 月

如今,您使用 Gulp4 和 Async/Await 功能处理构建任务可能会更容易:

// gulpfile.js

const fs = require('fs/promises');
const concat = require('concat');
const uglify = require('uglify-js');

let files_arr = ['file1.js', 'file2.js', 'file3.js'];

async function myGulpTask()
{
var concat_str,
uglify_str
;

// concat content
concat_str = await concat(files_arr);

// save to file
await fs.writeFile('concat.js', concat_str, 'utf8');

// uglify content
uglify_str = await uglify.minify(concat_str, {mangle:false}).code;

// save to file
await fs.writeFile('uglify.js', uglify_str, 'utf8');
}

module.exports = {
myTask: myGulpTask
};

然后从 CLI:

gulp myTask

关于gulp - 使用 Gulp 来连接和 Uglify 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24591854/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com