Download to read offline
![6
タスク定義と実行gulpfile.js
var gulp = require("gulp");
gulp.task("hello", function() {
console.log("Hello Gulp !!");
});
gulp.task("default", ["hello"]);
実行すると
$ gulp
Hello Gulp !!](https://image.slidesharecdn.com/gulpgrunt-151124161217-lva1-app6891/75/Gulp-Grunt-6-2048.jpg)
![15
変更監視gulp.watch("src/**/*.js", ["build"]);
gulp.watch("src/**/*.js", function(event) {
console.log("File " + event.path + " was changed.");
});](https://image.slidesharecdn.com/gulpgrunt-151124161217-lva1-app6891/75/Gulp-Grunt-15-2048.jpg)
![19
基本的な書き方Gruntfile.js
module.exports = function(grunt) {
grunt.registerTask("hello", "description", function() {
grunt.log.writeln("Hello Grunt !!");
});
grunt.registerTask("default", ["hello"]);
};](https://image.slidesharecdn.com/gulpgrunt-151124161217-lva1-app6891/75/Gulp-Grunt-19-2048.jpg)
![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"]);
};](https://image.slidesharecdn.com/gulpgrunt-151124161217-lva1-app6891/75/Gulp-Grunt-20-2048.jpg)
![[JavaScript][gulp.js] 一緒に楽しよう！gulp.jsのあれこれ](https://cdn.slidesharecdn.com/ss_thumbnails/2220gulpjs20160122-160219073056-thumbnail.jpg?width=640&height=640&fit=bounds)
フロント開発をがんばるためにGulpとGruntに入門してみた
- 1.
- 2.
- 3.
- 4.
- 5.
- 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")); });
- 9.
- 10.
- 11.
- 12. 12 Gulp API (2) gulp.src(globs):入力ファイルを取得 globs: 入力ファイルのパターン（src/**/*.jsみたいに 書ける）
- 13. 13 Gulp API (3) gulp.dest(path):ファイルへ書き込み path: 出力先ディレクトリ
- 14.
- 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: 変更時に実行したいコールバック関数
- 17.
- 18.
- 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.
- 22.
- 23.
- 24. 24 GulpとGruntの比較プラグインの粒度が違う Gulpのプラグインは単機能 Gulp plugin guidelinesays "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 DLin last month Grunt: 1,495,772 DL in last month
- 27.
- 28.