JavaScript初心者の私ですが、なんとかJavaScriptでサービスを作りたい。いろいろ準備するのも大変なので自動化できるところは自動化したい。
ということで、Gulpでの環境設定にチャレンジしてみました。やりたいことは次のリストのとおりです。
- gulpfileをCoffeeScriptで書きたい
- Sassの自動コンパイルをしてもらいたい
- CoffeeScriptの自動コンパイルをしてもらいたい
- 公開用ディレクトリにhtmlもコピーして移したい
- DeployしたらGithub Pageにデプロイしたい
というところです。Github Pageに仮のページがデプロイできたところをゴールにしたいと思います。
まずはGulpのインストールと準備
下記のコマンドでgulpとCoffeeScriptをグローバルにインストールします。
$ npm install -g gulp
そして、プロジェクト内にgulpをセットしていきます。
$ npm install --save-dev gulp gulp-coffee coffee-script
参考: gulpのアプローチ “なぜグローバルとローカルにインストールが必要なのか” | じまぐてっく
gulpfileをCoffeeScriptで書く & CoffeeScriptをコンパイル
まずプロジェクトの準備をして、gulpfileを作成します。
$ npm init $ vi gulpfile.coffee
今回は簡単に例としてsource/coffeeディレクトリのファイルをsource/jsディレクトリにコンパイルするコードをCoffeeScriptで書かれたgulpfile.coffeeで作成してみます。
ディレクトリを準備しました。
$ mkdir source/coffee $ mkdir dist/js
gulpfile.coffeeはこんな感じです。
gulp = require 'gulp'
coffee = require 'gulp-coffee'
gulp.task 'compile-coffee', () ->
gulp.src 'sourde/coffee/**/*.coffee'
.pipe coffee()
.pipe gulp.dest('dist/js')
現時点でのディレクトリはこのようになっています。
.
├── dist
│ └── js
├── gulpfile.coffee
├── node_modules
├── package.json
└── source
└── coffee
└── sample.coffee
実行してみます！
$ gulp compile-coffee [14:30:48] Requiring external module coffee-script/register [14:30:48] Using gulpfile ~/Desktop/gulp-trial/source/gulpfile.coffee [14:30:48] Starting 'compile-coffee'... [14:30:48] Finished 'compile-coffee' after 52 ms
できました！
.
├── dist
│ └── js
│ └── sample.js
├── gulpfile.coffee
├── node_modules
├── package.json
└── source
└── coffee
└── sample.coffee
参考: GulpでCoffeeScript、Sassをコンパイル – Qiita
Sassのコンパイルをする
gulp-sassを追加します。
$ npm install --save-dev gulp-sass
gulpfile.coffeeはこんな感じです。
gulp = require 'gulp'
coffee = require 'gulp-coffee'
sass = require 'gulp-sass'
gulp.task 'compile-coffee', () ->
gulp.src 'source/coffee/**/*.coffee'
.pipe coffee()
.pipe gulp.dest('dist/js')
gulp.task 'compile-sass', () ->
gulp.src 'source/scss/**/*.scss'
.pipe sass()
.pipe gulp.dest('dist/css')
コンパイルします。
$ gulp compile-sass
できました！
参考: GulpでCoffeeScript、Sassをコンパイル – Qiita
minifyする
gulp-uglifyとgulp-minify-css、gulp-cancatを追加します。
$ npm install --save-dev gulp-uglify gulp-minify-css gulp-concat
gulpfile.coffeeはこのようになりました。source/coffeeをJavaScriptに変換してsource/jsに格納した後、1ファイルにしてdist/jsに格納します。同様にsource/scssをCSSに変換してsource/cssに格納したあと、1ファイルにしてdist/cssに格納します。
gulp = require 'gulp'
coffee = require 'gulp-coffee'
uglify = require 'gulp-uglify'
sass = require 'gulp-sass'
minifyCss = require 'gulp-minify-css'
concat = require 'gulp-concat'
gulp.task 'compile-coffee', () ->
gulp.src 'source/coffee/**/*.coffee'
.pipe coffee()
.pipe gulp.dest('source/js')
gulp.task 'compile-js', () ->
compileFileName = 'application.js'
gulp.src 'source/js/**/*.js'
.pipe concat(compileFileName)
.pipe uglify()
.pipe gulp.dest('dist/js')
gulp.task 'compile-sass', () ->
gulp.src 'source/scss/**/*.scss'
.pipe sass()
.pipe gulp.dest('source/css')
gulp.task 'compile-css', () ->
compileFileName = 'application.css'
gulp.src 'source/css/**/*.css'
.pipe concat(compileFileName)
.pipe minifyCss()
.pipe gulp.dest('dist/css')
gulp.task 'compile', ['compile-coffee', 'compile-sass', 'compile-js', 'compile-css']
コンパイルしてみます。
$ gulp compile
できた！
CoffeeとSassの自動コンパイル（watch）の設定をする
run-sequenceとgulp-watchを追加します。
$ npm install --save-dev run-sequence $ npm install --save-dev gulp-watch
最初、gulp-watchだけでやっていたのですが、最後のファイルを纏めるところまで1度に行きませんでした。調べてみると、gulpはタスクが並列処理されるということで、直列処理できないかなと調べたらすぐに参考サイトが見つかり、経こうしました。
そして、compileタスクとwatchタスクを変更しました。
gulp.task 'compile', -> runSequence( ['compile-coffee','compile-sass'], ['compile-js', 'compile-css'] ) gulp.task 'watch', -> gulp.watch ['source/scss/**/*.scss', 'source/coffee/**/*.coffee'], ['compile']
compileのところで、作業単位ごとに直列処理を指定ます。watchのところで、監視対象ファイルを指定して、変更があったら実行するタスクを指定します。
$ gulp watch
できました！
ファイルのコピーをする
index.htmlもdistディレクトリに移動したい。その他の必要そうなファイルも移したい。コピーは簡単です。
gulp.task 'copy', ->
gulp.src([
'source/app/**/*.html'
])
.pipe(gulp.dest('dist'))
参考: 2015年はgulpで決まり！開発環境をgruntから乗り換えよう！（コーダー編）
現時点でのgulpfile.coffee
jsとcssを出力する際に、assetディレクトリに入れるように変更しています。
gulp = require 'gulp'
coffee = require 'gulp-coffee'
uglify = require 'gulp-uglify'
sass = require 'gulp-sass'
minifyCss = require 'gulp-minify-css'
concat = require 'gulp-concat'
watch = require 'gulp-watch'
runSequence = require 'run-sequence'
gulp.task 'compile-coffee', ->
gulp.src 'source/coffee/**/*.coffee'
.pipe coffee()
.pipe gulp.dest('source/js')
gulp.task 'compile-js', ->
compileFileName = 'application.js'
gulp.src 'source/js/**/*.js'
.pipe concat(compileFileName)
.pipe uglify()
.pipe gulp.dest('dist/asset/js')
gulp.task 'compile-sass', ->
gulp.src 'source/scss/**/*.scss'
.pipe sass()
.pipe gulp.dest('source/css')
gulp.task 'compile-css', ->
compileFileName = 'application.css'
gulp.src 'source/css/**/*.css'
.pipe concat(compileFileName)
.pipe minifyCss()
.pipe gulp.dest('dist/asset/css')
gulp.task 'copy', ->
gulp.src([
'source/app/**/*.html'
])
.pipe(gulp.dest('dist'))
gulp.task 'compile', -> runSequence(
['compile-coffee','compile-sass'],
['compile-js', 'compile-css'],
'copy'
)
gulp.task 'watch', ->
gulp.watch ['source/scss/**/*.scss', 'source/coffee/**/*.coffee', 'source/app/**/*.html'], ['compile']
参考: JavaScript – Gulp でタスクを並列/直列処理する – Qiita
CoffeeScriptでCoffeeとSassの環境設定をするところまでできました！
DeployしたらGithub Pageにデプロイしたい
distの中でgit initしてGithub Pageにpush （この部分は後ほど詳しく書きます）
今回作成したプロジェクト
Release Step1 · morizotter/first-gulp
こちらになります。ディレクトリの構成などまだこなれていないのですが、シンプルな分わかりやすい状態であると思います。gulp compileやgulp watchをやってみてください！
