Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Gulp ことはじめ

1.404 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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.

×