使用Gulp连接和Uglify文件 [英] Using Gulp to Concatenate and Uglify files

问题描述

我尝试使用Gulp：

I'm trying to use Gulp to:

1. 将3个特定的javascript文件连接起来，然后将结果保存到文件中（concat.js）


2. 取得这个连接的文件并uglify / minify它，然后将结果保存到另一个文件（uglify.js）
   

1. Take 3 specific javascript files, concatenate them, then save the result to a file (concat.js)
2. Take this concatenated file and uglify/minify it, then save the result to another file (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 noobs。

Coming from grunt it was a little confusing at first but it makes sense now. I hope it helps the gulp noobs.

如果你需要源代码，这是更新后的代码： p>

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文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！