☰

Gulp を使用してファイルを連結および Uglify する 質問する

tag-icon • tag-icon gulp
Gulp を使用してファイルを連結および Uglify する 質問する

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 操作が機能していないか、何らかの理由でファイルが生成されません。

これを実現するには何をする必要がありますか?

ベストアンサー1

結局、'uglification' の前に連結されたファイルを使用し、出力する必要があったことがわかりました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 ソースマップオプションと構成の詳細については、こちらをご覧ください。

更新 - 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

おすすめ記事