phi

I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python

phiaryjust a creator

gulp の gulp-rename モジュールを使って出力するファイルに .min をつける方法

10 years ago

hoge.js を minify したファイルを hoge.min.js として
出力する方法です.

gulp-rename ってやつを使います.

gulp-logo

拡張子を .js から .min.js に変換する

gulp-rename というタスクを使います.
下記コマンドでインストールできます.

$npm install --save-dev gulp-rename

ついでに uglify も

$npm install --save-dev gulp-uglify

あとは gulpfile.js に下記のようなタスクを 書けばOK♪

var gulp = require("gulp");  
var rename = require("gulp-rename");  
var uglify = require("gulp-uglify");

gulp.task("build", function() {  
  gulp.src('./hoge.js')
    .pipe(uglify())
    .pipe(rename({
      extname: '.min.js'
    }))
    .pipe(gulp.dest('./'))
    ;
});

$gulp build を実行すると hoge.js と同じ階層に hoge.min.js というファイルが出力されるのがわかるかと思います.

gulp-rename って?

ファイルを簡単にリネームすることができる gulp 用のプラグインです.

単純にファイル名を置き換えたり

gulp.src("./hello.txt")  
    .pipe(rename("./goodbye.md"))
    .pipe(gulp.dest("./dist")); // ./dist/goodbye.md

関数を渡したり

gulp.src("./hello.txt")  
    .pipe(rename(function(path) {
        path.dirname += 'page';
        path.basename += '-world';
        path.extname = '.md';
    }))
    .pipe(gulp.dest("./dist")); // ./dist/page/hello-world.md

ハッシュを渡したり

gulp.src("./hello.txt")  
    .pipe(rename({
        dirname: "main",
        basename: "test",
        prefix: "pre-",
        suffix: "-suf",
        extname: ".md"
    }))
    .pipe(gulp.dest("./dist")); // ./dist/main/pre-test-suf.md

ってことができます.