问题描述
我正在尝试使用 Gulp 来:
I'm trying to use Gulp to:
- 获取 3 个特定的 javascript 文件,将它们连接起来,然后将结果保存到一个文件 (concat.js)
- 获取这个连接的文件并对其进行 uglify/minify,然后将结果保存到另一个文件 (uglify.js)
到目前为止,我有以下代码
I have the following code so far
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 操作似乎不起作用,或者由于某种原因没有生成文件.
However, the uglify operation doesn't seem to be working, or the file isn't generated for some reason.
我需要做些什么才能做到这一点?
What do I need to do to make this happen?
推荐答案
原来我需要使用 gulp-rename
并在 'uglification' 之前先输出连接的文件.代码如下:
It turns out that I needed to use gulp-rename
and also output the concatenated file first before 'uglification'. Here's the code:
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
菜鸟有所帮助.
Coming from grunt
it was a little confusing at first but it makes sense now. I hope it helps the gulp
noobs.
而且,如果您需要源地图,这里是更新后的代码:
And, if you need sourcemaps, here's the updated code:
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.
See gulp-sourcemaps for more on options and configuration.
这篇关于使用 Gulp 连接和 Uglify 文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!