フロントエンド環境構築（node/nvm/npm/gulp）

以前のプロジェクトでgulpを利用していたのに、フロントエンド担当ではなかったため環境構築に携われませんでした。 正直よくわからないで使っていたので、自分で構築して何をやっていたのか考えてみます。 今回は「ドットインストール」を教材に習ったもののメモになります。

dotinstall.com ↑なので、普通にこっちをやったほうがいい。

やりたいこと

• タスクランナーを利用したCSS/JSの開発環境実装

環境（ちょっとアレンジしています）

• ubuntu（v14.04.4）
• node（v5.12.0）
• nvm（v0.31.2）※nodeのバージョン管理
• npm（v3.8.6）※nodeのパッケージ管理（gulpもパッケージのひとつ）

nodeバージョンについて

• 現時点で最新はv6.2.2だったがパッケージ対応が追いついていないものもあり、v5系で最新のバージョンを選択しました。
• ちなみに、LTS(Long-Term Support)とstableについてもぶつかったのですが、こちらに説明がありました。
  • Node.js v5.0 がリリースされました。 - from scratch

インストール

• nvmを利用してnode/npmをインストール

$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ echo 'if [[ -s ~/.nvm/nvm.sh ]] ; then source ~/.nvm/nvm.sh ; fi' >> ~/.bashrc
$ source ~/.bashrc
$ nvm --version
0.31.2
$ nvm ls-remote
　:　// 利用可能なバージョンが羅列される
$ nvm install v5.12.0
$ nvm use v5.12.0
Now using node v5.12.0 (npm v3.8.6)
$ nvm alias default v5.12.0 
default -> v5.12.0
$ node -v
v5.12.0
$ npm -v
3.8.6

プロジェクト作成

$ mkdir project
project $ cd project
project $ npm init
    :    // 以下、エンターでOK（package.jsonが作成される）
project $ npm install --save-dev gulp
project $ touch gulpfile.js // あとでgulp実行内容を書く

• こんなファイル構成になりました。

project/
    |-- node_modules/
    |    |    :
    |    |-- gulp/
    |
    |-- gulpfile.js
    |-- package.json

タスクランナー（gulp）の実装

• gulpfile.js

// src -> dist

var gulp = require('gulp');
var pkg = require('./package.json');
var imagemin = require('gulp-imagemin');

var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var header = require('gulp-header');
var webserver = require('gulp-webserver');

// htmlファイルコピー
gulp.task('html', function() {
    gulp.src('./src/index.html')
        .pipe(gulp.dest('./dist'));     // htmlコピー
});

// 画像ファイルコピー
gulp.task('img', function() {
    gulp.src('./src/img/*.jpg')
        .pipe(imagemin())               // 画像圧縮
        .pipe(gulp.dest('./dist/img')); // 画像コピー
});

// JS作成
gulp.task('js', function() {
    gulp.src('./src/coffee/*.coffee')
        .pipe(plumber())
        .pipe(coffee())             // JS変換
        .pipe(concat('all.min.js')) // JS結合
        .pipe(uglify())             // JS圧縮
        .pipe(header('/* copyright <%= pkg.name %> */', {pkg: pkg})) // ヘッダー
        .pipe(gulp.dest('./dist/js'));
});

// watch
gulp.task('watch', function() {
    gulp.watch('./src/coffee/*.coffee', ['js'])
    gulp.watch('./src/*.html', ['html'])
});

// webserver reload
gulp.task('webserver', function() {
    gulp.src('./dist')
        .pipe(
            webserver({
                host: '192.168.33.10',
                livereload: true
            })
        );
});

gulp.task('default', ['html', 'img', 'js', 'watch', 'webserver']);

タスクランナーの実行

$ gulp

• 上記gulpfile.jsで実行される内容
  • src/ディレクトリ下のhtmlファイルをdist/下にコピー
  • src/img/ディレクトリ下のjpgファイルをdist/img/下に圧縮してコピー
  • src/coffee/ディレクトリ下のcoffeeファイルをdist/js/下にJSに変換、連結・圧縮してコピー
    • おまけでヘッダーにプロジェクト名を挿入している
  • 上記の一通りを実行しつつローカルサーバー起動、watch待機する。
    • JS/htmlファイル更新時にwatch
    • サーバーはwatch動作時にreload

画像ファイル名の難読化や、sassコンパイルなども同じ要領で追加していけると思います。 ざっくり何をやっているのか、どのようにやっているのかがわかりました。