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: ローカル鯖起動
- load-plugins: プラグインロード $.プラグイン名で呼び出せます。
各種ファイル準備
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