Gulpことはじめ
Kyohei Morimoto
Gruntの複雑化
• Gruntは色々できそう!
• みんなでプラグインをいっぱい作った!
• おれのかんがえるさいきょうgruntfileが乱立
• gruntfileの複雑化
– 管理できない、読めない
– 動作が重くなる
• Gulpの...
“Speed. Efficiency. Simplicity.”
Gulpの始め方
sudo npm install -g npm
sudo npm install -g gulp
npm init
npmのアップデート
gulpのインストー
ル
package.jsonの作成(もちろん手動でもOK)
Gulpの始め方
sudo npm install gulp@x.x.x --save-
dev
x.x.xのところは、インストールしたCLIのバージョン
に
合わせる
gulpfile.jsを書く(タスクを書く)
• 基本的な流れはgruntと一緒
1. 読み込むプラグインを最初に記述
2. 行いたい処理を書く(sassのコンパイルとか)
3. 作ったものを実行する
gulpfile.jsを書く(タスクを書く)
• 基本的な流れはgruntと一緒
1. 読み込むプラグインを最初に記述
2. 行いたい処理を書く(sassのコンパイルとか)
3. 作ったものを実行する
処理の書き方
stream形式で書く
!?
streamについて
• gulp開発者達による解説書があります
• 詳しくは、substack's stream handbook
streamについて
• gulp.src() //操作するファイルを指定する
• .pipe(プラグイン名) //行いたい処理を書く
• .pipe(gulp.dest()); //出力したいファイルを
しているする
sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/s...
sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/s...
sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/s...
sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/s...
sassのコンパイル
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('htdocs/s...
VS
プラグイン数
2,828
669
プラグイン数
• この2カ月でGulpのプラグイン数は倍になっ
ている
• 大抵フロントエンドでやりたいことは、全然で
きるから大きな無い
実行処理
• gulpは早いらしい!
だが、体感ではそれほど分からなかった!
“By harnessing the power of node's streams you
get fast builds that don't write int...
設定ファイルの複雑さ
• CSS
– オートプレフィックス
– ファイルの結合
– 圧縮
• 画像
– 圧縮
• ファイルの監視
Gruntの場合
module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdo...
module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdo...
Gulpの場合
var gulp = require('gulp');
var concat = require('gulp-concat');
var prefixer = require('gulp-autoprefixer');
var minify =...
module.exports = function(grunt) {
grunt.initConfig({
paths: {
css: 'htdocs/css/',
cssdist: 'htdocs/dist/css/',
img: 'htdo...
結局どうなのよ
• 思っていたよりずっと使いやすい
• 処理が圧倒的に見やすい
• チームメンバーによっては導入してみても良
いかも
• ビルドツールはあくまで手段なので、
目的に合わせて選択をする
Thank you for your listening.
Upcoming SlideShare
Loading in …5
×

Gulp ことはじめ

732
-1

Published on

2014年の4月か5月くらいのLTで使った資料

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
732
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Gulp ことはじめ

  1. 1. Gulpことはじめ Kyohei Morimoto
  2. 2. Gruntの複雑化 • Gruntは色々できそう! • みんなでプラグインをいっぱい作った! • おれのかんがえるさいきょうgruntfileが乱立 • gruntfileの複雑化 – 管理できない、読めない – 動作が重くなる • Gulpの誕生
  3. 3. “Speed. Efficiency. Simplicity.”
  4. 4. Gulpの始め方 sudo npm install -g npm sudo npm install -g gulp npm init npmのアップデート gulpのインストー ル package.jsonの作成(もちろん手動でもOK)
  5. 5. Gulpの始め方 sudo npm install gulp@x.x.x --save- dev x.x.xのところは、インストールしたCLIのバージョン に 合わせる
  6. 6. gulpfile.jsを書く(タスクを書く) • 基本的な流れはgruntと一緒 1. 読み込むプラグインを最初に記述 2. 行いたい処理を書く(sassのコンパイルとか) 3. 作ったものを実行する
  7. 7. gulpfile.jsを書く(タスクを書く) • 基本的な流れはgruntと一緒 1. 読み込むプラグインを最初に記述 2. 行いたい処理を書く(sassのコンパイルとか) 3. 作ったものを実行する
  8. 8. 処理の書き方 stream形式で書く
  9. 9. !?
  10. 10. streamについて • gulp開発者達による解説書があります • 詳しくは、substack's stream handbook
  11. 11. streamについて • gulp.src() //操作するファイルを指定する • .pipe(プラグイン名) //行いたい処理を書く • .pipe(gulp.dest()); //出力したいファイルを しているする
  12. 12. sassのコンパイル var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
  13. 13. sassのコンパイル var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
  14. 14. sassのコンパイル var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
  15. 15. sassのコンパイル var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
  16. 16. sassのコンパイル var gulp = require('gulp'); var sass = require('gulp-sass'); gulp.task('sass', function () { gulp.src('htdocs/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css')); }); gulp.task('default', ['sass']);
  17. 17. VS
  18. 18. プラグイン数 2,828 669
  19. 19. プラグイン数 • この2カ月でGulpのプラグイン数は倍になっ ている • 大抵フロントエンドでやりたいことは、全然で きるから大きな無い
  20. 20. 実行処理 • gulpは早いらしい! だが、体感ではそれほど分からなかった! “By harnessing the power of node's streams you get fast builds that don't write intermediary files to disk. - gulpjs.com” • GruntもV0.5で早くなるっぽい https://github.com/gruntjs/grunt-docs/blob/master/Roadmap.md
  21. 21. 設定ファイルの複雑さ • CSS – オートプレフィックス – ファイルの結合 – 圧縮 • 画像 – 圧縮 • ファイルの監視
  22. 22. Gruntの場合
  23. 23. module.exports = function(grunt) { grunt.initConfig({ paths: { css: 'htdocs/css/', cssdist: 'htdocs/dist/css/', img: 'htdocs/img/', imgdist: 'htdocs/dist/img/' }, autoprefixer: { options: { browsers: ['last 2 version'] }, files: { expand: true, flatten: true, src: '<%= paths.css %>*.css', dest: '<%= paths.cssdist %>pre/' } }, cssmin: { compress: { files: { '<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css'] } } }, imagemin: { dynamic: { files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.{jpg,gif}', dest: '<%= paths.imgdist %>' }] } }, pngmin: { compile: { options: { ext: '.png' }, files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.png', dest: '<%= paths.imgdist %>' }] } }, watch: { css:{ files: ['<%= paths.css %>*.css'], tasks: ['autoprefixer', 'cssmin'] }, img:{ files: ['<%= paths.img %>**/*.{png,jpg,gif}'], tasks: ['imagemin', 'pngmin'] } } }); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-pngmin'); grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']); };
  24. 24. module.exports = function(grunt) { grunt.initConfig({ paths: { css: 'htdocs/css/', cssdist: 'htdocs/dist/css/', img: 'htdocs/img/', imgdist: 'htdocs/dist/img/' }, autoprefixer: { options: { browsers: ['last 2 version'] }, files: { expand: true, flatten: true, src: '<%= paths.css %>*.css', dest: '<%= paths.cssdist %>pre/' } }, cssmin: { compress: { files: { '<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css'] } } }, imagemin: { dynamic: { files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.{jpg,gif}', dest: '<%= paths.imgdist %>' }] } }, pngmin: { compile: { options: { ext: '.png' }, files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.png', dest: '<%= paths.imgdist %>' }] } }, watch: { css:{ files: ['<%= paths.css %>*.css'], tasks: ['autoprefixer', 'cssmin'] }, img:{ files: ['<%= paths.img %>**/*.{png,jpg,gif}'], tasks: ['imagemin', 'pngmin'] } } }); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-pngmin'); grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']); }; 67行
  25. 25. Gulpの場合
  26. 26. var gulp = require('gulp'); var concat = require('gulp-concat'); var prefixer = require('gulp-autoprefixer'); var minify = require('gulp-minify-css'); var imagemin = require('gulp-imagemin'); var plumber = require('gulp-plumber'); gulp.task('css', function () { gulp.src('htdocs/css/**/*.css') .pipe(plumber()) .pipe(prefixer('last 2 version')) .pipe(concat('style.min.css')) .pipe(minify()) .pipe(gulp.dest('htdocs/dist/css')); }); gulp.task('img', function () { gulp.src('htdocs/img/**/*') .pipe(plumber()) .pipe(imagemin()) .pipe(gulp.dest('htdocs/dist/img')); }); gulp.task('watch', function () { gulp.watch('htdocs/css/**/*', ['css']); gulp.watch('htdocs/img/**/*', ['img']); }); gulp.task('default', ['css', 'img']);
  27. 27. module.exports = function(grunt) { grunt.initConfig({ paths: { css: 'htdocs/css/', cssdist: 'htdocs/dist/css/', img: 'htdocs/img/', imgdist: 'htdocs/dist/img/' }, autoprefixer: { options: { browsers: ['last 2 version'] }, files: { expand: true, flatten: true, src: '<%= paths.css %>*.css', dest: '<%= paths.cssdist %>pre/' } }, cssmin: { compress: { files: { '<%= paths.cssdist %>style.min.css': ['<%= paths.cssdist %>pre/*.css'] } } }, imagemin: { dynamic: { files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.{jpg,gif}', dest: '<%= paths.imgdist %>' }] } }, pngmin: { compile: { options: { ext: '.png' }, files: [{ expand: true, cwd: '<%= paths.img %>', src: '**/*.png', dest: '<%= paths.imgdist %>' }] } }, watch: { css:{ files: ['<%= paths.css %>*.css'], tasks: ['autoprefixer', 'cssmin'] }, img:{ files: ['<%= paths.img %>**/*.{png,jpg,gif}'], tasks: ['imagemin', 'pngmin'] } } }); grunt.loadNpmTasks('grunt-autoprefixer'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.loadNpmTasks('grunt-pngmin'); grunt.registerTask('default', ['autoprefixer', 'cssmin', 'imagemin', 'pngmin']); }; 29行
  28. 28. 結局どうなのよ • 思っていたよりずっと使いやすい • 処理が圧倒的に見やすい • チームメンバーによっては導入してみても良 いかも • ビルドツールはあくまで手段なので、 目的に合わせて選択をする
  29. 29. Thank you for your listening.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×