gulpでjsファイルをminifyする

10422 ワード

gulp gulp テキストリンク

目的

gulpを使ってtest.jsをminifyしてtest.min.jsを作成します。

事前準備

npmをインストール
ディレクトリ構成は以下のような構成を想定しています

gulp_test/
　├ package.json
　├ gulpfile.js
　├ index.html
　└ js/test.js

js-minifyのタスクを作成する

必要なものをインストール

npm install gulp gulp-uglify gulp-rename

gulp-uglify: jsのminifyを行う
gulp-rename: minifyしたファイル名ちゃんと.min.jsに変更する

gulpfile.jsの修正

gulpfile.jsを以下のように修正します

gulpfile.js

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

//js minify
gulp.task('js-minify', function() {
    gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('./html/js/'));
});

実行

以下のコマンドを実行するとtest.min.jsができます

gulp js-minify

おまけ1(開発環境の自動化)

jsファイルを変更したら、ブラウザに自動反映を行うようにします

インストール

npm install gulp gulp-uglify gulp-rename gulp-watch gulp-plumber browser-sync

gulpfileの記述

gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();

gulp.task("default", ["browser-sync","watch"] ,function () {
    browserSync.reload;
});

gulp.task('watch', function() {
    gulp.watch(['./js/*.js', '!./js/*.min.js'], ['js-minify']);
});

//js minify
gulp.task('js-minify', function() {
    gulp.src(['./js/*.js', '!./js/*.min.js'])
        .pipe(plumber())
        .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
        .pipe(gulp.dest('./html/js/'))
        .pipe(browserSync.stream());
});

gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "http://localhost/gulp_test",
        port: 3000,
    });
});

実行

gulp

ブラウザで http://localhost:3000/gulp_test が開きます。

jsファイルを変更すると自動でリロードされます。

おまけ2(はまりどころ)

['./js/*.js', '!./js/*.min.js']のような記述がありましたが

['./js/*.js']だけの記述してしまうと

タスクを実行するたびにjsファイルが増殖してしまうのでご注意ください。