Edited at

grunt-express-serverを使って開発できるGruntfileを作ってみた

More than 5 years have passed since last update.


はじめに

Node.jsをExpressで作る際に、app.js, routes, jade, stylus, publicの中にあるファイルなどを更新した際に、serverがrestartしてブラウザもreloadされる。ようなGruntfileを作りました。まぁまぁ開発が早くなるんちゃうかと思います。


環境

Node.js v0.10.26

Express v3.0.0

node-supervisor

テンプレートはJadeを使ってます。

CSSは、stylusからCSSを書き出してます。その際に、ベンダープレフィックスを追加するautoprefixerが動いてます。

JavaScriptファイルは全てcoffeeで書きます。

vendorsフォルダーは、distにコピーしているだけです。


Nodeプロセス

node-supervisorを使って起動しますので、npm install -g node-supervisor してください。


ファイル構成

.

├── Gruntfile.coffee
├── app
│   ├── app.coffee
│   ├── bin
│   │   └── www
│   ├── public
│   │   ├── images
│   │   ├── javascripts
│   │   └── stylesheets
│   ├── routes
│   │   ├── index.coffee
│   │   └── user.coffee
│   └── views
│   ├── error.jade
│   ├── index.jade
│   └── layout.jade
├── node_modules
└── package.json


Getting Started

package.jsonのあるディレクトリでnpm installします。

必要なnode_modulesがインストールされます。


package.json

{

"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "^3.4.8",
"static-favicon": "^1.0.0",
"morgan": "^1.0.0",
"cookie-parser": "^1.0.1",
"body-parser": "^1.0.0",
"debug": "^0.7.4",
"jade": "^1.3.0"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-autoprefixer": "^0.8.1",
"grunt-connect-proxy": "^0.1.10",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-coffee": "^0.10.1",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-copy": "^0.5.0",
"grunt-contrib-imagemin": "^0.7.1",
"grunt-contrib-stylus": "^0.18.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-express-server": "^0.4.17",
"grunt-newer": "^0.7.0",
"matchdep": "^0.3.0"
}
}

npm install


Gruntfile.coffee

'use strict'

proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest
mountFolder = folderMount = (connect, base) ->
connect['static'] require('path').resolve(base)

listen = 8000
server = 3000

module.exports = (grunt) ->
require('matchdep').filterDev('grunt-*').forEach grunt.loadNpmTasks
grunt.initConfig

dir:
src: 'app'
styl: 'stylesheets'
coffee: 'javascripts'
images: 'images'
js: 'javascripts'
css: 'stylesheets'
img: 'images'
vendors: 'vendors'
dist: 'dist'
build: 'build'
docs: 'docs'
test: 'test'

stylus:
dist:
options:
compress: false
expand: true
cwd: '<%= dir.src %>'
src: '**/*.styl'
dest: '<%= dir.dist %>'
ext: '.css'

coffee:
dist:
option:
pretty: true
expand: true
cwd: '<%= dir.src %>'
src: '**/*.coffee'
dest: '<%= dir.dist %>'
ext: '.js'

# coffeeの文法チェック
coffeelint:
app: '<%= dir.src %>/**/*.coffee'

# CSSのprefiexを補完
autoprefixer:
options:
browsers: ['last 2 version', 'ie 8', 'ie 7', 'ie 6']
dist:
expand: true
cwd: '<%= dir.dist %>'
src: '**/*.css'
dest: '<%= dir.dist %>'
ext: '.css'

# 画像の圧縮
imagemin:
options:
optimizationLevel: 7
pngquant: false
dist:
expand: true
cwd: '<%= dir.dist %>/public/<%= dir.images %>'
src: '**/*.{jpg,jpeg,gif}'
dest: '<%= dir.dist %>/public/<%= dir.img %>'

copy:
jade:
expand: true
dot: true
cwd: '<%= dir.src %>'
dest: '<%= dir.dist %>'
src: '**/*.jade'
bin:
expand: true
cwd: '<%= dir.src %>/bin'
dest: '<%= dir.dist %>/bin'
src: '**'
img:
expand: true
dot: true
cwd: '<%= dir.src %>'
dest: '<%= dir.dist %>'
src: [
'**/*.{gif,jpeg,jpg,png,svg,webp}',
]
vendors:
expand: true
dot: true
cwd: '<%= dir.src %>/public/<%= dir.vendors %>'
dest: '<%= dir.dist %>/public/<%= dir.vendors %>'
src: ['**']
build:
expand: true
dot: false
cwd: '<%= dir.dist %>/'
dest: '<%= dir.build %>/'
src: ['**']

connect:
front:
options:
host: 'localhost'
port: listen
middleware: (connect) ->
[
mountFolder(connect, '.')
proxySnippet
]
open:
target: 'http://localhost:' + listen
livereload: true

proxies: [
context: '/'
host: 'localhost'
port: server + ''
https: false
changeOrigin: false
]

express:
dev:
options:
background: true
port: server
cmd: 'supervisor'
args: []
script: '<%= dir.dist %>/bin/www'
delay: 0

watch:
jade:
files: '<%= dir.src %>/**/*.jade',
tasks: 'newer:copy:jade'
stylus:
files: '<%= dir.src %>/**/*.styl'
tasks: [
'newer:stylus:dist',
'newer:autoprefixer:dist',
'newer:styleguide:dist'
]
coffee:
files: '<%= dir.src %>/**/*.coffee'
tasks: 'newer:coffee:dist'
images:
files: ['<%= dir.src %>/**/*.{gif,jpeg,jpg,png,svg,webp}']
tasks: ['newer:imagemin:dist', 'copy', 'imagemin']
vendors:
files: ['<%= dir.src %>/<%= dir.vendors %>/**']
tasks: ['copy:vendors']
express:
files: [
'<%= dir.dist %>/app.js'
'<%= dir.dist %>/routes/**/*.js'
'<%= dir.dist %>/views/**/*.jade'
]
tasks: ['express:dev']
options:
livereload: true
veiw:
files: ['<%= dir.dist %>/public/**/*.{js,css}']

clean:
dist:
src: [
'<%= dir.dist %>'
]
docs:
src: '<%= dir.docs %>'

grunt.registerTask 'server', [
'configureProxies'
'express:dev'
'connect:front'
'watch'
]

grunt.registerTask 'default', [
'clean'
'stylus:dist'
'autoprefixer'
'coffee:dist'
'copy:jade'
'copy:img'
'copy:bin'
'copy:vendors'
'imagemin'
]

grunt.registerTask 'dev', [
'default'
'configureProxies'
'express:dev'
'connect:front'
'watch'
]



簡単な使い方

デフォルトのコマンドは、coffeeファイルがJavaScriptファイルに、stylusファイルがCSSファイルに書きだされ、jadeはコピーされて、画像ファイルは圧縮されます。

grunt

grunt devで、ブラウザが立ち上がりページが表示されます。ファイル監視をし、ファイルに変更があれば、サーバーが再起動してブラウザもリロードします。

grunt dev