朝活#3
※個人的なメモです、簡単なアプリしか想定していません。
gulp, browserify, reactjs, coffee-script, sass(scss), hamlで始めます。
ディレクトリ構成
srcにあるcoffee-script, haml, scssを編集して、そこをgulpでwatchします。
dest/, *.htmlはgulpが勝手に作ります。libにはダウンロードしたCSS及びJSライブラリを入れる構成です。
.
├── package.json
├── gulpfile.coffee
├── *.html
├── dest
│ ├── css
│ └── js
├── lib
│ ├── css
│ └── js
└── src
├── coffee
├── haml
└── scss
Bootstrapping
$ npm install gulp -g
$ npm init
$ npm install gulp browserify gulp-sass gulp-haml gulp-watch glob vinyl-source-stream react coffee-script coffee-reactify superagent sanitize.css -save
CSSで困らないために、sanitize.cssを使います。
-> src/scss/style.scss
@import 'sanitize.scss';
-> src/haml/index/haml
!!!
%html{lang: "ja"}
%head
%meta{charset: "utf-8"}
%title Title
%link{rel: "stylesheet", type: "text/css", href: "dest/css/style.css"}
/%link{rel: "stylesheet", type: "text/css", href: "lib/css/xxx.css"}
%body
%script{src: "dest/js/app.js"}
/%script{src: "lib/js/xxx.js"}
エントリポイントです、Reactを使う場合、bodyをReactで扱えばこれ以上書かなくても良いかもしれないです。libに追加したCSS/JSがあればロードします。
gulpfile
watchしていますが、コンパイルエラーでgulpのプロセスが落ちるという欠陥がありますが、個人用途ですぐに捨てゆくのもなので気にせず使っています。
gulp = require 'gulp'
browserify = require 'browserify'
sass = require 'gulp-sass'
haml = require 'gulp-haml'
watchify = require 'gulp-watch'
source = require 'vinyl-source-stream'
glob = require 'glob'
gulp.task 'default', ['build']
gulp.task 'build', [
'build:coffee'
'build:scss'
'build:haml'
]
gulp.task 'build:coffee', ->
srcFiles = glob.sync('./src/coffee/*.coffee')
return browserify
entries: srcFiles
transform: ['coffee-reactify']
.bundle()
.pipe source('app.js')
.pipe gulp.dest('dest/js')
gulp.task 'build:scss', ->
gulp
.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('dest/css'))
gulp.task 'build:haml', ->
gulp
.src('src/haml/*.haml')
.pipe(haml())
.pipe(gulp.dest('.'))
gulp.task 'watch', ['build'], ->
gulp.watch 'src/coffee/*.coffee', ['build:coffee']
gulp.watch 'src/scss/*.scss', ['build:scss']
gulp.watch 'src/haml/*.haml', ['build:haml']
$ gulp watch
で開発スタートです。
Show comments