Go to Qiita Advent Calendar 2024 Top
LoginSignup
26
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kabane

遅すぎたgulp実践導入 (Mac編)

Last updated at Posted at 2016-03-13

今更ですが、gulp導入からタスク定義までのメモ書きです。
初投稿なので、おかしな箇所があれば、やさしくご指摘をいただけますと幸いです。

本投稿ではgulpの導入からタスク定義までを記載しておりますので、gulpの概要から知りたいというは場合は、下記の記事に目を通していただいた後、本記事を読み進めていただければと。

gulpとは何か? https://app.codegrid.net/entry/gulp-1

◆ 今回gulpで行うこと

  • lessファイルのコンパイル
  • cssファイルの圧縮
  • jsファイルの圧縮
  • Webサーバーの利用

◆ ディレクトリ構成

本投稿は、プロダクトが下記のディレクトリ構成であることを前提に記載を行っています。ディレクトリ名や階層等はご自身のプロダクトに読み替えてください。
app
├ htmlファイル群
├ src → 開発用のファイル群
│ └ js → 圧縮前のjsファイル群
│ └ less → lessファイル群
├ assets → コンパイルされたファイル群(srcの内容がコンパイルされ格納される。)
│ └ js
│ └ css
└

#1.node.js、npmのアップデート

gulpのインストール前に開発環境のnode.js及びnpmを最新バージョンにしておきたいと思います。
既に最新版のnode.js及びnpmがインストールされている場合は省略してください。
ここではnvmというnode.jsのバージョン管理ツールを使用し、最新版node.jsのインストールを行います。

# nodeのバージョン管理用パッケージインストール
brew install nvm

# nvmコマンドのパスを通す
# シェルがbashの場合
echo "source \$(brew --prefix nvm)/nvm.sh" >> ~/.bash_profile
# シェルがzshの場合
echo "source \$(brew --prefix nvm)/nvm.sh" >> ~/.zshrc

# echoコマンド実行後、ターミナルソフト(正確にはシェル)を再起動

# node(最新の安定版)インストール
nvm install 0.12
# インストールしたnodeをデフォルトで使用する様にする
nvm alias default 0.12

# npmアップデート
npm update -g npm

#2.package.jsonの作成
続けてプロダクト内で使用するnpmパッケージを管理するための準備を行います。
プロダクトディレクトリ直下(app)で下記コマンドを実行してください。

npm init

上記コマンドの実行を行うと、コマンドライン上でいくつか質問が続きますが、ここでは一旦name(プロダクト名)とauthor(プロダクト作成者)の情報だけ入力しておきましょう。
その他の質問は全てEnterキーで流してしまって問題ないかと思います。
全ての質問が終わるとpackage.jsonというファイルが作成されます。
package.jsonにはプロダクト内でインストールを行ったnpmパッケージの情報等が記載されます。

package.json
{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "kabaneshi",
  "license": "ISC",
}

#3.gulp及びパッケージのインストール
では実際にgulp及びgulpで使用するパッケージのインストールを行いましょう。

◆ gulpのインストール


sudo npm install -g gulp

◆ gulpのパッケージインストール

今回は以下のパッケージをインストールします。

  • gulp-less: lessコンパイルを行うためのパッケージ
  • gulp-cssmin: cssファイルの圧縮を行うためのパッケージ
  • gulp-uglify: jsファイルの圧縮を行うためのパッケージ
  • gulp-webserver: ローカルサーバーを利用するためのパッケージ
sudo npm install -D gulp-less gulp-cssmin gulp-uglify gulp-webserver

上記コマンド実行後、package.jsonを確認すると以下の様にインストールを行ったパッケージの情報が追記されています。

package.json

// 省略
"devDependencies": {
    "gulp": "^3.9.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-less": "^3.0.3",
    "gulp-uglify": "^1.4.2",
    "gulp-webserver": "^0.9.1"
  }

#4.gulpのタスク定義

次はgulpのタスク定義を行っていきます。
まずはcss関連のタスクを定義してみましょう。
プロダクトディレクトリ直下(app)にgulpfile.jsというファイルを作成し、以下の内容を記載してください。

gulpfile.js
// gulp本体のパッケージ及びタスクで使用するパッケージの呼び出し 
var gulp = require("gulp"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin');

// gulpで処理を行うファイルのパス情報
var paths = {
        less: './src/less',
        css_build: './assets/css',
        
    };

これでcss関連のタスクを定義する準備ができました。
続けて実際にlessファイルのコンパイルとcssファイル(コンパイル後のファイル)の圧縮を行うためのタスクを書いていきます。

gulpfile.js
// gulp及びタスクで使用するパッケージの呼び出し 
var gulp = require("gulp"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),

// gulpで処理を行うファイルのパス情報
var paths = {
        less: './src/less',
        css_build: './assets/css',
    };

// lessコンパイル
gulp.task('less', function() {
    gulp.src(paths.less+'/*.less')
        .pipe(less())
        .pipe(gulp.dest(paths.css_build));
});

// cssファイル圧縮
gulp.task('minify', function() {
    gulp.src(paths.css_build+'/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest(paths.css_build));
});

  • gulp.task(“タスク名”,function() {});
    タスクの登録をおこないます。第一引数にタスク名、第二引数にタスク関数を渡します。

  • gulp.src(“ファイル名”)
    タスクの対象ファイルを指定します。
    ※ 上記のlessタスクであれば、src/less直下の全てのlessファイルをコンパイル対象として指定

  • pipe(処理)
    srcで指定したファイルに処理を施します
    ※ gulpではsrcで指定したファイルに施したい処理をpipeというメソッドで繋ぐ(srcに対して複数の処理を行うことも可能)

  • gulp.dest(“出力先”)
    出力先に処理を施したファイルを出力します。

これでcss関連のタスクの定義が完了しました。
gulpfile.jsに定義を行ったタスクはコマンドライン上から gulp タスク名 で実行することができます。

試しにsrc/less直下に適当なlessファイルを置き、 __gulp less__を実行してみてください。
assets/cssにコンパイルされたcssファイルが出力されるはずです。

続けてjs関連のタスク定義を行います。

gulpfile.js
// gulp及びタスクで使用するパッケージの呼び出し 
var gulp = require("gulp"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    uglify = require('gulp-uglify'); // 追加パッケージ

var paths = {
        less: './src/less',
        css_build: './assets/css',
		 // jsファイルのパス情報を追加
        js: './src/js',
        js_build: './assets/js'       
    };


// 省略

// jsファイル圧縮
gulp.task('uglify', function() {
  gulp.src(paths.js+'/*.js')
    .pipe(uglify())
    .pipe(gulp.dest(paths.js_build));
});

jsファイルを圧縮するための uglify というタスクを追加しました。
gulp uglify を実行するとsrc/js直下のjsファイルが圧縮され、assets/jsに格納されます。

続けてWebサーバーを利用するためのタスクを定義しましょう。

gulpfile.js
// gulp及びタスクで使用するパッケージの呼び出し 
var gulp = require("gulp"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    uglify = require('gulp-uglify'),
    server = require('gulp-webserver'); // 追加パッケージ

// 省略

// Webサーバー
gulp.task('server', function() {
    gulp.src('./') // サーバのルートパス
        .pipe(server({
            livereload: true, // ライブリロード有効化
            open: true // serverタスク実行時、ルートに指定した階層をブラウザで立ち上げる
        }));
});
   

// gulpコマンドで実行するタスク
gulp.task('default', ['server']);

これで gulp server でWebサーバが立ち上がりhttp://localhost:8000 がブラウザで開かれる様になりました。
しかし、ここではもう一つ __default__というタスクを最終行に追加しています。
タスク名に default を指定したタスクは gulp コマンド実行時に処理が走ります。
上記では __gulp__コマンド実行時、 __serve__rタスクが実行される様に __default__タスクの定義を行いました。

さて、ここまでいくつかタスクの定義を行ってきましたが、タスクを実行するのにいちいち gulp hoge の様なコマンドを実行するのは面倒です。
gulpが提供しているwatchというメソッドを使用し、lessファイルやjsファイルの変更を行った際に、自動でタスクが走る様にしてみましょう。
先ほど定義を行った default タスクを以下の様に修正します。

gulpfile.js
// 省略

// gulpコマンド実行時に行われるタスク
gulp.task('default', ['server'], function(){
    gulp.watch(paths.less+'/*.less',['less', 'minify']);
    gulp.watch(paths.js+'/*.js', ['uglify']);
});
  • gulp.watch('監視対象のファイル名', ['タスク'])
    watchメソッドは第一引数で指定した監視対象のファイルに変更が生じた際に、第二引数で渡したタスクを実行します。
    第二引数のタスクは配列で渡すので、複数タスクを実行したい場合には ['タスク1', 'タスク2'] といった形で引数を渡します。

これで、 gulp コマンドを実行すると、srcディレクトリ以下のlessファイルやjsファイルを変更したタイミングでwatchで設定したタスクが実行されます。

お疲れ様です。冒頭で記載したタスクはすべて __gulp__コマンドで行える様になりました。
gulpは他にも色々なことができるので、それはまたの機会にご紹介させていただければと思います。

参考記事

26
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
26
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?