はじめてのGulp(1)CoffeeScriptとSassで環境を作る

はじめてのGulp(1)CoffeeScriptとSassで環境を作る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-uglifygulp-minify-cssgulp-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-sequencegulp-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

jscssを出力する際に、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 compilegulp watchをやってみてください!

Gulp

シリーズ

Pocket
LINEで送る

You may also like...