俺のgulpfileなど

My gulpfile

自分用に、これからの人用にだいたい使うものをまとめてみました。
不定期で更新するかもしれません。

以下のものをビルドを行います。

• Html
  • Slim or Jade
  • Kss: Styluguide
• Javascript
  • CoffeeScript
  • Browserify
• Css
  • Stylus
  • Auto Prefixer
  • Spritesmith
• Bower
  • MainBowerFiles: bower_componentsを任意フォルダへ移動
• Gulp
  • load-plugins: プラグインロード $.プラグイン名で呼び出せます。
    • 呼び出せないものもアリ
  • watch: ファイル監視
  • connect: ローカル鯖起動

各種ファイル準備

package.json

{
  "name": "gulp",
  "version": "0.0.0",
  "description": "This projects is for styleguide include Css, Javascript, Html components.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "author": "tyshgc",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "bower": "^1.3.9",
    "browserify": "^5.10.1",
    "browsernizr": "^1.0.2",
    "coffee-script": "^1.7.1",
    "coffeeify": "^0.7.0",
    "core-util-is": "^1.0.1",
    "debowerify": "^0.8.1",
    "gulp": "^3.8.7",
    "gulp-autoprefixer": "0.0.8",
    "gulp-coffee": "^2.1.1",
    "gulp-connect": "^2.0.6",
    "gulp-if": "^1.2.4",
    "gulp-jade": "^0.7.0",
    "gulp-kss": "0.0.2",
    "gulp-load-plugins": "^0.5.3",
    "gulp-plumber": "^0.6.4",
    "gulp-prefix": "0.0.10",
    "gulp-rename": "^1.2.0",
    "gulp-slim": "0.0.10",
    "gulp-spritesmith": "0.0.2",
    "gulp-streamify": "0.0.5",
    "gulp-stylus": "^1.3.0",
    "gulp-uglify": "^0.3.2",
    "gulp-watch": "^0.6.9",
    "gulp.spritesmith": "^1.1.1",
    "lodash": "^2.4.1",
    "main-bower-files": "^2.0.0",
    "readable-stream": "^1.0.27-1",
    "source-map": "^0.1.38",
    "vinyl": "^0.3.2",
    "vinyl-source-stream": "^0.1.1"
  }
}

bower.json

{
  "name": "ore-ore-gulp",
  "version": "0.0.0",
  "homepage": "",
  "authors": [
    "tyshgc"
  ],
  "description": "",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.1",
    "selectivizr": "~1.0.2",
    "modernizr": "~2.8.3"
  }
}

gulpfile.coffee

# config & require
gulp            = require 'gulp'
coffee          = require 'gulp-coffee'
connect         = require 'gulp-connect'
gulpif          = require 'gulp-if'
prefix          = require 'gulp-prefix'
source          = require 'vinyl-source-stream'
browserify      = require 'browserify'
spritesmith     = require 'gulp.spritesmith'
mainBowerFiles  = require 'main-bower-files'

$ = require('gulp-load-plugins')()

# path
$app = './app'
$src = $app + '/src'
config =
    path:
        slim: $src + '/slim/*.slim'
        stylus: $src + '/stylus/*.*'
        stylusbuilds: $src + '/stylus/**/*.*'
        coffee: $src + '/coffee/**/*.coffee'
        image: $src + '/images/sprite/*.*'
    outpath:
        slim: $app + '/views/'
        stylus: $app + '/assets/stylesheets/'
        stylusbuilds: $src + '/stylus/builds/'
        coffee: $app + '/assets/javascripts/builds/'
        libs: $app + '/assets/javascripts/builds/libs/'
        javascript: $app + '/assets/javascripts/'
        image: $app + '/assets/images/'

# connect
# http://localhost:8080
gulp.task 'connect', ->
    connect.server {
        root: $app
        livereload: true
    }

# bower componentsの移動
gulp.task 'bower', ->
    gulp.src(mainBowerFiles())
    .pipe gulp.dest(config.outpath.libs)

# javascriptの生成
gulp.task 'coffee', ->

    browserify(config.path.coffee+'main.coffee')
    .bundle()
    .pipe source 'main.js'
    .pipe gulp.dest(config.outpath.javascript)
    .pipe connect.reload()

# slimのビルド
gulp.task 'slim', ->
    gulp.src(config.path.slim)
    .pipe $.slim()
    .pipe gulp.dest(config.outpath.slim)
    .pipe connect.reload()

# jadeのビルド
###
gulp.task 'jade', ->
    gulp.src(config.path.jade)
    .pipe $.jade()
    .pipe gulp.dest(config.outpath.jade)
    .pipe connect.reload()
###

# Auto Prefix
gulp.task 'prefix', ->
    gulp.src(config.outpath.stylus)
    .pipe $.autoprefixer("last 1 version", "> 1%", "ie 8", "ie 7")
    .pipe gulp.dest(config.outpath.stylus)
    .pipe connect.reload()

# Sprite Imageの生成  
gulp.task 'sprite', ->
    spriteData = gulp.src(config.path.image)
    .pipe $.plumber()
    .pipe spritesmith({
        imgName: 'sprite.png'
        imgPath: '/assets/images/sprites.png'
        cssName: 'sprites.styl'
        cssFormat: 'stylus'
        padding: 10
    })

    spriteData.img.pipe(gulp.dest(config.outpath.image))
    spriteData.css.pipe(gulp.dest(config.outpath.stylusbuilds+'/mixins/'))

# cssの生成
gulp.task 'stylus', ->
    gulp.src(config.path.stylusbuilds)
    .pipe $.stylus()
    .pipe gulp.dest(config.outpath.stylus)
    .pipe connect.reload()

# タスクのwatch
gulp.task 'watch', ->
    gulp.watch config.path.slim, ['slim']
    # gulp.watch config.path.slim, ['jade']
    gulp.watch config.path.coffee+'**/*.coffee', ['coffee'] 
    gulp.watch config.path.stylusbuilds, ['stylus']
    gulp.watch config.path.stylusbuilds, ['prefix']


# 実行=> $ gulp
gulp.task 'default', 
[
    'bower'
    'coffee'
    'scripts'
    'sprite'
    'stylus'
    'prefix'
    'slim'
    # 'jade'
    'watch'
    'connect'
]

インストール

shell

$ mkdir ore-ore-gulp
$ cd ore-ore-gulp
$ sudo npm install -g slim
$ sudo npm install -g jade
$ sudo npm install -g coffee-script
$ sudo npm install
$ bower install
$ gulp