はじめてのGulp(3)gulpfile.coffeeを整理する

はじめてのGulp(3)gulpfile.coffeeを整理するはじめてのGulp 3回目になります。

今回は、今まで作成したgulpfile.coffeeを編集して、より使いやすい状態にしていきたいと思います。やりたいことは以下のとおりです。

  • 不要になったpackageをuninstallする
  • task名を一般的なものにする
  • sassを包含したcompassのパッケージに変える
  • 最終的に出来上がったgulpfile.coffeeを公開する

というところです。

不要になったpackageをuninstallする

gulp-webserverを追加する前に、gulp-connectを追加していたのですが、不要になったのでuninstallします。

$ npm uninstall gulp-connect --save-dev

最初、--save-devを付けずにuninstallしたのですが、package.jsonから削除されていませんでした。そこで、--save-devを付けたところ、正しく削除できた様子です。

task名を一般的なものにする

これはシンプルにRenameを行いました。基本的にはGulpのパッケージ名に合わせました。ついでに、よく使うタスクもまとめて3つに整理しました。

  • build
  • watch
  • serve

servebuildを実行した後に、web serverを実行するようにしています。

gulp.task 'build', ->
 runSequence(
  ['coffee','sass'],
  ['uglify', 'minify'],
  'copy'
  )

gulp.task 'watch', ->
  gulp.watch ['source/scss/**/*.scss', 'source/coffee/**/*.coffee', 'source/app/**/*.html'], ['compile']

gulp.task 'serve', ->
  runSequence(
    ['build'],
    ['webserver']
    )

sassを包含したcompassのパッケージに変える

sassを使うならcompassの方が良さそうだったので変更します。

$ npm install gulp-compass --save-dev
$ npm uninstall gulp-sass --save-dev

compassを利用するには、config.rbファイルが必要ということなので追加します。

css_dir = "source/css"
sass_dir = "source/sass"

sassのタスクを削除してcompassに変更します。

# gulp.task 'sass', ->
#   gulp.src 'source/scss/**/*.scss'
#     .pipe sass()
#     .pipe gulp.dest('source/css')

gulp.task('compass', ->
    gulp.src 'source/scss/**/*.scss'
    .pipe(compass({
      config_file: 'config.rb'
      css: 'source/css/'
      sass: 'source/scss/'
    }))
  )

参考: CSSの常識が変わる!「Compass」の基礎から応用まで! | 株式会社LIG

最終的に出来上がったgulpfile.coffeeを公開する

gulpfile.coffeeはこんな形になりました。

gulp        = require 'gulp'
coffee      = require 'gulp-coffee'
uglify      = require 'gulp-uglify'
compass     = require 'gulp-compass'
minifyCss   = require 'gulp-minify-css'
concat      = require 'gulp-concat'
watch       = require 'gulp-watch'
webserver   = require 'gulp-webserver'
runSequence = require 'run-sequence'

gulp.task 'coffee', ->
  gulp.src 'source/coffee/**/*.coffee'
  .pipe coffee()
  .pipe gulp.dest('source/js')

gulp.task 'uglify', ->
  compileFileName = 'application.js'
  gulp.src 'source/js/**/*.js'
  .pipe concat(compileFileName)
  .pipe uglify()
  .pipe gulp.dest('dist/asset/js')

gulp.task 'compass', ->
  gulp.src 'source/scss/**/*.scss'
  .pipe(compass({
    config_file: 'config.rb'
    css: 'source/css/'
    sass: 'source/scss/'
  }))

gulp.task 'minify', ->
  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.src([
    'source/image/**/*'
  ])
  .pipe(gulp.dest('dist/asset/image'))

gulp.task 'webserver', ->
  gulp.src('dist')
  .pipe(webserver({
    livereload: true
    port: 9000
    fallback: 'dist/index.html'
    open: true
    })
  )

gulp.task 'build', ->
 runSequence(
  ['coffee','compass'],
  ['uglify', 'minify'],
  'copy'
  )

gulp.task 'watch', ->
  gulp.watch ['source/scss/**/*.scss', 'source/coffee/**/*.coffee', 'source/app/**/*.html'], ['build']

gulp.task 'serve', ->
  runSequence(
    ['build'],
    ['webserver']
    )

基本構成

  • dist: 公開用ディレクトリ
  • source: 開発用ディレクトリ

基本タスク

  • build: coffee -> js, sass-> css, jsとcssのファイルサイズを小さく, htmlファイルをdistにコピー
  • watch: coffeeとscssの変更があった場合に、buildを実行する
  • serve: buildして、簡易サーバーを立ち上げる(ファイルが変更されたら、自動リロードする)

ここまでのコード

Release Step3 · morizotter/first-gulp

Pocket
LINEで送る

You may also like...