Node.jsでささっとSPA始める個人的なメモ

朝活#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

Adsense

Share

  • このエントリーをはてなブックマークに追加

About

どこにでもいる平凡なプログラムを書く人間のログ。

Recently

Tags

Pages

-->