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/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./htdocs/css'));});

gulp.task('default', ['sass']);

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']);

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']);

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']);

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']);

VS

プラグイン数

2,828

669

プラグイン数

• この2カ月でGulpのプラグイン数は倍になっている

• 大抵フロントエンドでやりたいことは、全然できるから大きな無い

実行処理

• 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

設定ファイルの複雑さ

• CSS– オートプレフィックス

– ファイルの結合

– 圧縮

• 画像

– 圧縮

• ファイルの監視

Gruntの場合

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']);};

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行

Gulpの場合

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']);

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行

結局どうなのよ

• 思っていたよりずっと使いやすい

• 処理が圧倒的に見やすい

• チームメンバーによっては導入してみても良いかも

• ビルドツールはあくまで手段なので、目的に合わせて選択をする

Thank you for your listening.