Upgrade to Pro — share decks privately, control downloads, hide ads and more …

gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン

Kohei Asai
September 30, 2014

gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン

nodejsで動くビルドシステムヘルパー「gulp」の紹介とハンズオンを2014/09/30に社内で行った時のスライドです。

Kohei Asai

September 30, 2014
Tweet

More Decks by Kohei Asai

Other Decks in Programming

Transcript

  1. ४උʢʣ ࡶʹIUNMΛॻ͘ JOEFYIUNM <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

    <link rel="stylesheet" href="./style.min.css"> </head> <body> <div class="accept">͸͍</div> <div class="decline">͍͍͑</div> <div class="later">͋ͱͰ</div> </body>
  2. ४උʢʣ ࡶʹMFTTΛॻ͘ TUZMFMFTT @blue: #03a9f4; @orange: #ff5722; ! .button(@color: #607d8b)

    { display: inline-block; padding: 8px 16px; border-radius: 4px; background: @color; box-shadow: darken(@color, 15%) 0 4px 0; color: #ffffff; } .accept { .button(@blue); } .decline { .button(@orange); } .later { .button(); }
  3. OPEFKTͷΠϯετʔϧ Πϯετʔϧ͞Ε͍ͯΔ͔֬ೝ $ node -v Πϯετʔϧ͍ͯ͠ͳ͍ਓ͸OPEFCSFX͔OWNͰೖΕ ͍ͯͩ͘͞ $ curl -L

    git.io/nodebrew | perl - setup $ export PATH=$HOME/.nodebrew/current/bin:$PATH $ source ~/.bashrc $ nodebrew install-binary stable $ nodebrew use stable
  4. HVMQpMFKTΛ࡞Δ ͜Μͳײ͡ʹॻ͖·͢ HVMQpMFKT var gulp = require('gulp'); var less =

    require('gulp-less'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')); });
  5. ͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp [13:14:39] Using gulpfile ~/gulp-training/gulpfile.js [13:14:39] Starting

    'default'... [13:14:39] Finished 'default' after 42 ms ʮTUZMFDTTʯ͕ੜ੒͞Ε͍ͯΔ % ls gulpfile.js node_modules/ style.css index.html package.json style.less
  6. HVMQpMFKTʹॻ͖଍͢ var gulp = require('gulp'); var less = require('gulp-less'); var

    csso = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); });
  7. ͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp [13:32:16] Using gulpfile ~/gulp-training/gulpfile.js [13:32:16] Starting

    'default'... [13:32:16] Finished 'default' after 68 ms TUZMFDTTʹՃ͑ɺʮTUZMFNJODTTʯ͕ੜ੒͞Ε͍ͯΔ % ls gulpfile.js node_modules/ style.css style.min.css index.html package.json style.less
  8. HVMQpMFKTʹॻ͖଍͢ var gulp = require('gulp'); var less = require('gulp-less'); var

    csso = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) });
  9. ͜Μͳײ͡ʹͳΓ·ͨ͠ʁ HVMQͷ݁Ռ $ gulp watch [13:38:51] Using gulpfile ~/gulp-training/gulpfile.js [13:38:51]

    Starting 'watch'... [13:38:51] Finished 'watch' after 6.38 ms TUZMFMFTTΛฤूͯ͠อଘ͢ΔͱɺউखʹʮEFGBVMUʯ λεΫ͕૸Δ [13:39:09] Starting 'default'... [13:39:09] Finished 'default' after 62 ms
  10. var gulp = require('gulp'); var less = require('gulp-less'); var csso

    = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); λεΫͷ࡞੒
  11. var gulp = require('gulp'); var less = require('gulp-less'); var csso

    = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷಡΈࠐΈ
  12. var gulp = require('gulp'); var less = require('gulp-less'); var csso

    = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); QJQFΛ௨͢
  13. var gulp = require('gulp'); var less = require('gulp-less'); var csso

    = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷॻ͖ग़͠
  14. var gulp = require('gulp'); var less = require('gulp-less'); var csso

    = require('gulp-csso'); var rename = require('gulp-rename'); ! gulp.task('default', function() { return gulp.src('./style.less') .pipe(less({ paths: ['./'] })) .pipe(gulp.dest('./')) .pipe(csso()) .pipe(rename('style.min.css')) .pipe(gulp.dest('./')); }); ! gulp.task('watch', function() { return gulp.watch('./*.less', ['default']) }); ϑΝΠϧͷ؂ࢹ