フロントエンド開発のメモ
2015/11/14
最近のフロントエンド開発ではビルドランナーを使うのが常識になってきてるみたいなので。
jspm的なもっと進んだやり方でも良いんだけど、pluginが少ない、文献が少ない、自身の技術力不足、ということでビルドランナーなやり方でやる。
Contents
gulpを導入したい
nodebrewを導入
io.jsなんてモノも出てきたけど。nodejsでおｋ。
https://github.com/hokaccha/nodebrew
nodeのバージョンを使い分けたくなる日がくるはず、なので導入する。
gulpを導入
npm install -g glup
sassを書きたい
sassはcssをイイカンジに書けるシンタックスシュガー的なヤツ。
jsで言うところのcoffeeと同じポジション、かな。
gulpのプラグインを導入
npm install --save-dev gulp-sass
使い方
|
1 2 3 4 5 6 7 8 9 |
var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('default', function() { gulp.src('./app/styles/app.scss') .pipe(sass({ })) .pipe(gulp.dest('./app/styles')); }); |
slimを書きたい
npm install --save-dev gulp-slim
|
1 2 3 4 5 |
gulp.src('./app/views/*.slim') .pipe(slim({ pretty: true })) .pipe(gulp.dest('./app/views/')); |
AngularJSでtemplate-cacheしたい
npm install --save-dev gulp-template-cache
|
1 2 3 4 5 |
gulp.src('./app/views/*.html') .pipe(templateCache('app.templates.js',{ module: 'app' })) .pipe(gulp.dest('./app/scripts')) |
slimやsassなどのファイル変更を監視してタスクを実行したい
watchというメソッドを使う。
gulpfile.jsに下記のようなタスクを定義する。
|
1 2 3 4 |
gulp.task('watch', function () { gulp.watch('./assets/scss/*.scss', ['sass']); gulp.watch('./assets/slim/*.slim', ['slim']); }); |
コマンドラインでgulp watchを実行すればOK。
package.jsonでプロジェクトに依存するライブラリを管理する
|
1 |
npm init |
簡単なHTTPサーバが欲しい
手元のPCでhtmlを表示したいときがある。
pythonがアレば簡単にサーバを立てられる。
|
1 |
python -m http.server |
336px
336px
関連記事
-
-
Docker Machineのメモ
随時 …
-
-
Docker導入したらどうするの？
Do …