#はじめに
一月前から入れたgruntfileがだいたい固まってきたので、とりあえず公開します。
##機能
- jadeをhtmlにコンパイルして、minifyします。
- stylusをcssにコンパイル、ベンダープレフィックスをかけて、単一ファイルに結合、minifyします。
- coffeescriptもコンパイル後、単一ファイルに結合、minifyします。
- connectでローカル環境で動作確認ができます。
- livereloadでデータ保存時に自動でブラウザも更新します。
- estewatchで特定のフォルダだけ監視します。
##事前準備
- lib_minified
- .bowerrc (bowerの設定を変える時に使います。)
- bower.json (bowerを使っていなければ必要なファイルです。)
- Gruntfile.coffee
-
src
- _coffee
- _jade
- _stylus
- images
- public
太字のフォルダだけ用意すれば、それ以外のフォルダは自動で作成してくれるはずです。
##中身
Gruntfile.coffee
module.exports = (grunt) ->
grunt.initConfig
pkg: grunt.file.readJSON('package.json')
dir: # ディレクトリ設定
libmin: "lib_minified"#bowerのライブラリの一時保存先
src: "_src" #ソースフォルダ
public: "public" #コンパイル済みフォルダ
#html関係
jade:
compile:
options:
pretty: true
files: [
expand: true
cwd: '<%=dir.src%>/_jade'
src: ['**/*.jade']
dest: '<%=dir.src%>/html'
ext: '.html'
]
htmlmin:
minify:
options:
removeComments: true
removeCommentsFromCDATA: true
removeCDATASectionsFromCDATA: true
collapseWhitespace: true
removeOptionalTags: true
ignoreCustomComments: [ ]
expand: true
cwd: '<%=dir.src%>/html'
src: '**/*.html'
dest: '<%=dir.public%>'
#css関係
stylus:
options:
compress: false
dist:
expand: true
cwd: '<%=dir.src%>/_stylus'
src: '*.stylus'
dest:'<%=dir.src%>/css/compile'
ext: '.css'
autoprefixer:
options:
browsers: [
'last 4 versions', 'ie 8', 'ie 9'
]
prefix:
expand: true
flatten: true
cwd: '<%=dir.src%>/css/compile'
src: '*.css'
dest:'<%=dir.src%>/css/prefix'
ext: '.css'
cssmin:
compress:
files:[
'<%=dir.public%>/css/style.min.css' : ['<%=dir.src%>/css/prefix/*.css']
'<%=dir.src%>/css/compress/style.min.css' : ['<%=dir.src%>/css/prefix/*.css']
]
#js関係
coffee:
compile:
options:
bare: true
files: [
expand: true
cwd: '<%=dir.src%>/_coffee'
src: ['**/*.coffee']
dest: '<%=dir.src%>/js'
ext: '.js'
]
concat:
options:[
separator: ';'
stripBanners: true
banner: '/*! <%=pkg.name%> - v<%=pkg.version%> - ' +'<%=grunt.template.today("yyyy-mm-dd")%> */'
]
dist:
files:[
'<%=dir.src%>/js/concat/raw.js':'<%=dir.src%>/js/*.js'
'<%=dir.public%>/js/concat/raw.js':'<%=dir.src%>/js/*.js'
]
uglify:
dist:
files:[
'<%=dir.public%>/js/raw.min.js' : '<%=dir.public%>/js/concat/raw.js'
]
#画像の軽量化
imagemin:
dist:
options:
optimizationLevel: 3
interlced : false
progressive : false
pngquant : false
files: [
expand: true
cwd:'<%=dir.src%>/images'
src: ['**/*.{jpg,png,gif,svg}']
dest:'<%=dir.public%>/img/'
]
#外部ライブラリの共有
copy:
#libminにデータをおけば、src,public両方のcssとjsのライブラリが更新されるよ
css__src:
expand: true
cwd: '<%=dir.libmin%>'
src: '*.css'
dest:'<%=dir.src%>/css/lib'
js__src:
expand: true
cwd: '<%=dir.libmin%>'
src: '*.js'
dest:'<%=dir.src%>/js/lib'
css_public:
expand: true
cwd: '<%=dir.libmin%>'
src: '*.css'
dest:'<%=dir.public%>/css/lib'
js_public:
expand: true
cwd: '<%=dir.libmin%>'
src: '*.js'
dest:'<%=dir.public%>/js/lib'
#phpはコンパイルする必要がないので、暫定的にここでpublicまでコピーする
php:
expand: true
cwd: '<%=dir.src%>/php'
src: ['**/*.php']
dest: '<%=dir.public%>'
#jsライブラリの更新（怖いのでデータの取得後、手動で更新しないと反映されません）
bower:
install:
options:
targetDir: '<%=dir.src%>/library'
layout: 'byType'
install: true
verbose: false
cleanTargetDir: false
cleanBowerDir: false
connect:
server:
options:
port: 9001
hostname: 'localhost'
base: 'public'
open: true
#watchより軽量らしいので、estewatchでフォルダを監視
esteWatch:
options:
dirs: [
"<%=dir.src%>/_jade/**"
#"<%=dir.src%>/html/**/**"
"<%=dir.src%>/_coffee/**"
#"<%=dir.src%>/js/**"
"<%=dir.src%>/_stylus/**"
#"<%=dir.src%>/css/**/**"
#"<%=dir.public%>/**"
]
livereload:
enabled: true
extensions: ['html', 'jade', 'css', 'styl', 'stylus', 'js', 'coffee']
port: 35729
"jade": (path) ->
['newer:jade','newer:htmlmin']
#"html": (path) ->
# ['newer:htmlmin']
"stylus": (path) ->
['newer:stylus','newer:autoprefixer','newer:cssmin']
#"autoprefixer": (path)-> #through
# ['newer:autoprefixer'] #through
#"cssmin": (path) ->
# ['newer:cssmin']
"coffee": (path) ->
['newer:coffee','newer:concat','newer:uglify']
#パッケージのバージョンアップに使う、grunt−release
releace:
options:
bump: true
grunt.loadNpmTasks 'grunt-bower-task'
grunt.loadNpmTasks 'grunt-contrib-copy'
grunt.loadNpmTasks 'grunt-contrib-jade'
grunt.loadNpmTasks 'grunt-contrib-htmlmin'
grunt.loadNpmTasks 'grunt-contrib-stylus'
grunt.loadNpmTasks 'grunt-contrib-cssmin'
grunt.loadNpmTasks 'grunt-contrib-coffee'
grunt.loadNpmTasks 'grunt-contrib-imagemin'
grunt.loadNpmTasks 'grunt-contrib-concat'
grunt.loadNpmTasks 'grunt-contrib-uglify'
grunt.loadNpmTasks 'grunt-encoding'
grunt.loadNpmTasks 'grunt-autoprefixer'
##grunt.loadNpmTasks 'grunt-css-prefix'
grunt.loadNpmTasks 'grunt-contrib-connect'
grunt.loadNpmTasks 'grunt-contrib-livereload'
grunt.loadNpmTasks 'grunt-este-watch'
grunt.loadNpmTasks 'grunt-newer'
grunt.loadNpmTasks 'grunt-release'
grunt.registerTask 'make', [
'bower', 'copy', 'newer:imagemin',
'newer:jade', 'newer:htmlmin',
'newer:stylus', 'newer:autoprefixer', 'newer:cssmin',
'newer:coffee', 'newer:concat', 'newer:uglify'
]
grunt.registerTask 'default', ['make', 'esteWatch']
##効果
これで
$ grunt
と入力すれば
-
lib_minified
-
.bowerrc
-
bower.json
-
Gruntfile.coffee
-
src
- _coffee
- _jade
- _stylus
-
css
- compile
- compress
- lib
- prefix
-
html
- xxx
- yyy
- zzz
- images
-
js
- concat
- lib
- library
-
public
-
css
- lib
- img
-
js
- concat
- lib
- xxx
- yyy
- zzz
-
css
太字表記のフォルダが自動で生成されます。
gruntが起動しているあいだはデータの変更がすぐに/public以下のファイルまで適応されます。
cssは「style.min.css」、
jsは「raw.min.js」という
単一のフォルダで生成されるので、お気をつけください。