Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à フロント開発をがんばるためにGulpとGruntに入門してみた
Similaire à フロント開発をがんばるためにGulpとGruntに入門してみた (20)
Dernier
Dernier (10)
フロント開発をがんばるためにGulpとGruntに入門してみた
- 6. 6 タスク定義と実行gulpfile.js var gulp = require("gulp"); gulp.task("hello", function() { console.log("Hello Gulp !!"); }); gulp.task("default", ["hello"]); 実行すると $ gulp Hello Gulp !!
- 7. 7 Gulp API (1) gulp.task(name, deps, fn): タスク定義 name: タスク名 deps: 依存タスク fn: タスクの処理内容
- 8. 8 少し本格的なタスクvar gulp = require("gulp"); var uglify = require("gulp-uglify"); gulp.task("default", function() { gulp.src("foo.js") .pipe(uglify()) .pipe(gulp.dest("dest")); });
- 10. 10 Gulpの動作イメージ
- 12. 12 Gulp API (2) gulp.src(globs): 入力ファイルを取得 globs: 入力ファイルのパターン（src/**/*.jsみたいに 書ける）
- 13. 13 Gulp API (3) gulp.dest(path): ファイルへ書き込み path: 出力先ディレクトリ
- 15. 15 変更監視gulp.watch("src/**/*.js", ["build"]); gulp.watch("src/**/*.js", function(event) { console.log("File " + event.path + " was changed."); });
- 16. 16 Gulp API (4) gulp.watch(glob, tasks), gulp.watch(glob, fn): 変更監視 glob: 監視対象のファイルのパターン tasks: 変更時に実行したいタスクリスト fn: 変更時に実行したいコールバック関数
- 19. 19 基本的な書き方Gruntfile.js module.exports = function(grunt) { grunt.registerTask("hello", "description", function() { grunt.log.writeln("Hello Grunt !!"); }); grunt.registerTask("default", ["hello"]); };
- 20. 20 ちょっと複雑な例module.exports = function(grunt) { grunt.loadNpmTasks("grunt-contrib-uglify"); grunt.initConfig({ uglify: { target1: { src: "foo.js", dest: "foo.min.js" } } }); grunt.registerTask("default", ["uglify"]); };
- 21. 21 Gruntの動作イメージ
- 24. 24 GulpとGruntの比較プラグインの粒度が違う Gulpのプラグインは単機能 Gulp plugin guideline says "plugin should only do one thing". プラグインを組み合わせてタスクを作る Gruntはプラグイン＝タスク
- 25. 25 GulpとGruntの比較Gruntは遅いらしいけど本当？ Gruntでプラグインをつないで処理する場合、プラ グイン毎にディスクI/Oが発生 Gulpはインメモリで処理できるのでその分早い ただ、トータルでどっちが早いかは状況(使ってる プラグインなど)による Grunt next version (0.5) では、Gulpと同じようにディ スクI/Oなしでタスクの入出力をつなげるようにな る
- 26. 26 GulpとGruntの比較先発のGruntの方がユーザーベースが大きい？ Gulp: 1,595,761 DL in last month Grunt: 1,495,772 DL in last month