Downloaded 16 times
![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'));
//
出力ファイル
});](https://image.slidesharecdn.com/wpdfesgulp-150307034552-conversion-gate01/75/High-Performance-Gulp-9-2048.jpg)
![Foundationの設定ファイルをコピー
//
Foundationのファイルをコピー
gulp.task('copy:foundation',
function()
{
return
gulp.src([
foundationScssPath
+
'foundation.scss',
foundationScssPath
+
'foundation/_settings.scss'
])
.pipe(gulpLoadPlugins.rename({
prefix:
'_'
}))
.pipe(gulp.dest(scssPath
+
'core/'));
});](https://image.slidesharecdn.com/wpdfesgulp-150307034552-conversion-gate01/75/High-Performance-Gulp-18-2048.jpg)
![他のファイルはbower_componentsから直接読み込む
gulp.task('sass', function() {
return gulpLoadPlugins.rubySass(scssPath, {
loadPath: [bowerPath + 'foundation/scss'],
style: 'nested',
bundleExec: false,
require: 'sass-globbing',
sourcemap: false
})
.pipe(gulp.dest(cssPath));
});](https://image.slidesharecdn.com/wpdfesgulp-150307034552-conversion-gate01/75/High-Performance-Gulp-19-2048.jpg)
![//
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でスタイルガイドをコマンド一発で作成](https://image.slidesharecdn.com/wpdfesgulp-150307034552-conversion-gate01/75/High-Performance-Gulp-24-2048.jpg)
High Performance Gulp
- 2. 井村 圭介 KEISUKE IMURA ファンタラクティブ株式会社CEO / デザイナー / エンジニア フリーランスを経てWeb制作会社を設立。CMS案件やWebサービス開発に多数関わる。 Webに関することならデザイン・フロントエンド・バックエンドと幅広くこなすオール ラウンダー。2015年はDjangoを使った自社サービスを開発中。
- 3.
- 4.
- 5.
- 6.
- 7. 入力 gulp.src .pipe gulp.dest 処理 プラグイン Node.jsパッケージ オリジナルタスク 出力 gulpの基本
- 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')); // 出力ファイル });
- 10.
- 11. • 実行手順の自動化 • 実行手順の一元化/ 単純化 gulpを通して実行するメリット
- 12.
- 13.
- 14.
- 15. require npm install bower install @include gulp-jadebrowserify gulp.spritesmith BrowserSync jade scss app.js bower_components └─ foundation node_modules sprite/*.png 触るファイル 出力されるファイル html style.css styleguide build.js sprite.png gulp-ruby-sass gulp-kss
- 16. • BowerでFoundation 5をインストール •KSSでスタイルガイド作成 • BrowserifyでJSを結合 gulpで楽にしているポイント
- 17. Foundationの設定ファイルをコピー bower_components └─ foundation └─ scss ├─foundation.scss └─ foundation └─ _settings.scss shared └─ scss └─ core ├─ _foundation.scss └─ __settings.scss コピーBower でインストール コピー
- 18. Foundationの設定ファイルをコピー // Foundationのファイルをコピー gulp.task('copy:foundation', function() { return gulp.src([ foundationScssPath + 'foundation.scss', foundationScssPath + 'foundation/_settings.scss' ]) .pipe(gulpLoadPlugins.rename({ prefix: '_' })) .pipe(gulp.dest(scssPath + 'core/')); });
- 19. 他のファイルはbower_componentsから直接読み込む gulp.task('sass', function() { returngulpLoadPlugins.rubySass(scssPath, { loadPath: [bowerPath + 'foundation/scss'], style: 'nested', bundleExec: false, require: 'sass-globbing', sourcemap: false }) .pipe(gulp.dest(cssPath)); });
- 20. gulp-kssでスタイルガイドをコマンド一発で作成 styleguide ├─ styleguide.md ├─ template ├─public ├─ index.html ├─ section-1.html └─ section-2.html shared └─ scss └─ module ├─ _hoge.scss └─ _fuga.scss 生成 生成 $ gulp styleguide
- 22.
- 23. css（scss）のコメントとしてスタイルガイドを記述 // Button // // Yourstandard 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でスタイルガイドをコマンド一発で作成
- 25. BrowserifyでJSを結合 Bower でインストール npm でインストール オリジナルで制作 bower_components └─packages... node_modules └─ packages... shared └─ js ├─ package.js ├─ app.js └─ build.js 生成 require
- 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の例
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. Let’s try writingyour own gulpfile.js!!