More Related Content
Similar to High Performance Gulp (20)
High Performance Gulp
- 2. 井村 圭介
KEISUKE IMURA
ファンタラクティブ株式会社 CEO / デザイナー / エンジニア
フリーランスを経てWeb制作会社を設立。CMS案件やWebサービス開発に多数関わる。
Webに関することならデザイン・フロントエンド・バックエンドと幅広くこなすオール
ラウンダー。2015年はDjangoを使った自社サービスを開発中。
- 8. gulpfile.jsの例
//
モジュールの読み込み
var
gulp
=
require('gulp');
var
csso
=
require('gulp-‐csso');
//
$
gulp
cssminコマンドで実行するタスクの登録
gulp.task('cssmin',
function()
{
gulp.src('app.css')
//
入力ファイル
.pipe(csso())
//
処理をpipeで記述
.pipe(gulp.dest('app.min.css'));
//
出力ファイル
});
- 9. gulp-load-pluginsが便利
//
モジュールの読み込み
var
gulp
=
require('gulp');
var
gulpLoadPlugins
=
require('gulp-‐load-‐plugins')({
pattern:
['gulp-‐*',
'gulp.*']
});
//
$
gulp
cssminコマンドで実行するタスクの登録
gulp.task('cssmin',
function()
{
gulp.src('app.css')
//
入力ファイル
.pipe(gulpLoadPlugins.csso())
//
処理をpipeで記述
.pipe(gulp.dest('app.min.css'));
//
出力ファイル
});
- 23. css(scss)のコメントとしてスタイルガイドを記述
// Button
//
// Your standard button suitable for clicking.
//
// Markup: <a href="#" class="button {$modifiers}">CLICK</a>
//
// :hover - Highlights when hovering.
// .shiny - Do not press this big, shiny, red button.
//
// Style guide 1
.button {
...
}
.button.shiny {
...
}
- 24. //
KSSでスタイルガイドを生成するタスク
gulp.task('styleguide',
function()
{
//
CSSをスタイルガイド内にコピー
gulp.src(cssPath
+
'style.css')
.pipe(gulp.dest(styleGuidePath));
//
スタイルガイドを生成
gulp.src([scssPath
+
'*.scss',
scssPath
+
'**/*.scss'])
.pipe(gulpLoadPlugins.kss({
overview:
styleGuidePath
+
'styleguide.md',
templateDirectory:
styleGuidePath
+
'template/'
}))
.pipe(gulp.dest(styleGuidePath));
});
gulp-kssでスタイルガイドをコマンド一発で作成
- 26. var
browserify
=
require('browserify');
var
buffer
=
require('vinyl-‐buffer');
var
source
=
require('vinyl-‐source-‐stream');
gulp.task('js',
function()
{
browserify(jsPath
+
'src/app.js')
.bundle()
.pipe(source('build.js'))
.pipe(buffer())
.pipe(gulpLoadPlugins.uglify())
.pipe(gulp.dest(jsPath));
});
BrowserifyでJSを結合
- 27. var jQuery = require('jquery');
(function($) {
$(document).ready(function() {
$('#hello').text('hello');
});
})(jQuery);
app.jsの例