HamlとSassを勉強しています。普通にHTMLとCSSで書けばいいものをなぜわざわざツールを覚える必要があるのか？と疑問で今までやってきませんでしたが、やってみると便利ですね。この手の技術は基本的に難しいことはなく、ひたすら書きまくって慣れるしかないです。
HamlやSassを書きまくっていると、どうしてもコマンドラインを打つ手間が面倒くさくなってきます。GruntとかGulpとか流行っているのが体感的に分かりました。今からだとGulpの方がいいのかもしれませんが、Watchされて手間が少なくなれば目的を満たせるので、情報量も多いGruntで自動化してみました。CoffeeScriptでGruntfileが書けたので「もうこれでいいじゃん！」ってな感じでGulpを試すモチベーションがあまり湧きませんでした。一応、CoffeeScriptのタスクやJavascriptのテストのタスクも追加してみました。HamlとSassに慣れたらCoffeeScriptでjQueryのコードをシンプル化してみようと思っております。
https://github.com/kanjihtmt/frontend
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
| module.exports = (grunt) ->
pkg = grunt.file.readJSON 'package.json'
grunt.initConfig
coffeelint:
app:
files:
src: [
'Gruntfile.coffee',
'src/**/*.coffee',
'test/**/*.coffee'
]
simplemocha:
all:
src: ['test/**/*.coffee']
options:
ui: 'bdd'
coffee:
compile:
files: [
expand: true,
cwd: 'src',
src: '*.coffee',
dest: 'js',
ext: '.js'
]
haml:
dist:
files: [
expand: true,
cwd: 'haml',
src: '*.haml',
dest: '.',
ext: '.html'
]
sass:
dist:
options:
style: 'expanded'
files: [
expand: true,
cwd: 'sass',
src: ['*.scss'],
dest: 'css',
ext: '.css'
]
watch:
css:
files: 'sass/*.scss'
tasks: ['sass']
haml:
files: 'haml/*.haml'
tasks: ['haml']
scripts:
files: [
'src/**/*.coffee',
'test/**/*.coffee',
]
tasks: [
'coffeelint',
'coffee'
'simplemocha'
]
for t of pkg.devDependencies
if t.substring(0, 6) is 'grunt-'
grunt.loadNpmTasks t
grunt.registerTask 'default', ['watch']
|
まだminifyや画像のリサイズなどのタスクは書いてません。Gruntfileはこれから徐々に育てていこうと思っております。(もしかしたらGulpに移行する気になるかもしれません) これを使って連休中は、レスポンシブデザインの学習のためSassとHamlを書きまくろうかと思ってます。