静的サイトgulpファイル(jade,stylus,coffeescript)

この記事のgulpちゃんが何をしてくれるか

  • コンパイルしちゃうわよ(jade,stylus,coffee)
  • ファイルの更新時、コンパイルを自動でするわよ
  • ファイルの更新時、ブラウザを自動で更新するわよ
  • yamlファイルをjadeに流し込むわよ
  • cssを整形するわよ(インデント、プロパティの順番)
  • 特定のjsファイルを1つにまとめて圧縮するわよ
  • ファイルキャッシュしてコンパイル速度を上げるわよ

gulpfile

いくわよ

gulpfile.coffee
gulp = require "gulp"

#コンパイル
coffee = require "gulp-coffee"
jade = require "gulp-jade"
stylus = require "gulp-stylus"
nib = require "nib"
autoprefixer = require "gulp-autoprefixer"

#ファイル監視、更新
notify = require "gulp-notify"
plumber = require "gulp-plumber"
cache = require "gulp-cached"
browserSync = require "browser-sync"

#ファイル結合、管理
concat = require "gulp-concat"
uglify = require "gulp-uglify"
rename = require "gulp-rename"

#css整形
cssbeautify = require "gulp-cssbeautify"
csscomb = require "gulp-csscomb"

#yaml
vinylYamlData = require "vinyl-yaml-data"
deepExtend = require "deep-extend-stream"

#開発ディレクトリ
dev =
jade: "./dev/jade/"
stylus: "./dev/stylus/"
js: "./dev/js/"
yaml: "./dev/config.yml"

#公開ディレクトリ
pub =
html: "./public/"
css: "./public/css/"
js: "./public/js/"

#yamlデータ
locals = {}

#yaml読み込みタスク
gulp.task "yaml", ->
return gulp.src "#{dev.yaml}"
.pipe vinylYamlData()
.pipe deepExtend(locals)

#jadeタスク
gulp.task "jade", ["yaml"], ->
return gulp.src [
"#{dev.jade}**/*.jade",
"!#{dev.jade}**/_*.jade"
]
.pipe cache "jade"
.pipe plumber
errorHandler: notify.onError "Error: <%= error.message %>"
.pipe jade
pretty: true,
locals: locals
.pipe gulp.dest "#{pub.html}"
.on "end", browserSync.reload

#stylタスク
gulp.task "stylus", ->
return gulp.src [
"#{dev.stylus}**/*.styl",
"!#{dev.stylus}**/_*.styl"
]
.pipe cache "stylus"
.pipe plumber
errorHandler: notify.onError "Error: <%= error.message %>"
.pipe stylus
use: nib(),
compress: true,
linenos: false
#css整形
.pipe csscomb()
.pipe cssbeautify
indent: ' ',
openbrace: 'end-of-line',
autosemicolon: true
.pipe gulp.dest "#{pub.css}"
.on "end", browserSync.reload

#coffeeタスク
gulp.task "coffee", ->
return gulp.src "#{dev.js}**/*.coffee"
.pipe cache "coffee"
.pipe plumber
errorHandler: notify.onError "Error: <%= error.message %>"
.pipe coffee
bare: true
.pipe gulp.dest "#{pub.js}"
.on "end", browserSync.reload

#jsファイル結合
gulp.task "concat_ie", ->
return gulp.src "#{dev.js}ie/*.js"
.pipe concat "ie.js"
.pipe uglify()
.pipe rename
extname: ".min.js"
.pipe gulp.dest "#{pub.js}"

#ブラウザ
gulp.task "browser", ->
browserSync
port: 8888,
server:
baseDir: "./public"
open: false,
notify: false

#監視(jade, stylus, coffee)
gulp.task "watch", ["browser"], ->
gulp.watch "#{dev.jade}**/*.jade", ["jade"]
gulp.watch "#{dev.stylus}**/*.styl", ["stylus"]
gulp.watch "#{dev.js}**/*.coffee", ["coffee"]

#デフォルトタスク
gulp.task "default", ["watch"]

使い方

コマンドgulpで監視。
指定ポートでブラウザ確認。(上記の場合『localhost:8888』)
ファイル更新時、ローカルサーバーでブラウザが自動更新。
gulpfileと同じ階層に.csscomb.json設置。
csscombファイルの中身はcsscomb.jsを参照。

(゚д゚)ウマー

csscomb

一部オプションを変更
{
"eof-newline": false,
"space-after-selector-delimiter": " ",
}

sort-orderでプロパティの順番を任意に調節。

課題

nibとautoprefixerってどうやって使い分けんのん。
cssの重複プロパティってダブリを自動で消したりできねぇのん。
cssのメディアクエリを1つにまとめてぇのん。
cssスプライトしたいけど調べる時間がねぇのん。

結論

時間ねぇ