読者です 読者をやめる 読者になる 読者になる

リハビリエンジニア

エンジニアリングのリハビリ中

上からマリコ、いまさらGulp(2)

Gulp

さあ1回目にひきつづき、Gulpにランしてもらうタスクを書いていきます。
やりたいことはいくつもありますが、まずはJSの圧縮と結合からやってみましょう。

はじめに

gulpfile.jsは都度必要なプラグインをnpm install して、
node_moduleディレクトリにインストールします。
それらを以下のように読み込んであげてから使うといった感じです。

var gulp = require('gulp');
var sass = require('gulp-sass');

1. JSの圧縮

gulpでjsファイルを圧縮するには、gulp-uglifyというプラグインを使用します。

インストール

npm install --save-dev gulp-uglify

gulpfile.js

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

// 「jsの圧縮」タスクを登録
gulp.task('uglify', function() {
  console.log('--------- uglify ----------');
  return gulp.src('_build/js/**')//_build/js/以下のファイルを全て圧縮
    .pipe(uglify({preserveComments: 'license'}))//ライセンス表記は圧縮しない
    .pipe(gulp.dest('js'));//エクスポート先
});

2. JSの結合

gulpでjsファイルを結合するには、gulp-concatのプラグインを使用します。

インストール

npm install --save-dev gulp-concat

gulpfile.js

var concat = require('gulp-concat');

gulp.task('concat', function() {
  console.log('--------- concat ----------');
  return gulp.src('_build/js/**')
    .pipe(concat('main.min.js'))//結合後の名前
    .pipe(gulp.dest('js'));//どこにエクスポートするか
});

同時に結合と圧縮

そもそも別々でやる必要があまりないので同時にやりたい。

gulp.task('js', ['concat', 'uglify']);