php開発で使うタスクランナー gulp
17 likes10,862 views
![ytake
{
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "*",
"bootstrap": "*",
"react": "*"
}
}](https://image.slidesharecdn.com/phpstudygulp-150126092132-conversion-gate02/85/php-gulp-19-320.jpg)
![ytake
var gulp = require('gulp'),
bower = require('bower’);
!
gulp.task('bower', function () {
return bower.commands.install(
[],
{save: true},
{})
.on('end', function (data) {
console.log(data);
});
});
$ gulp bower](https://image.slidesharecdn.com/phpstudygulp-150126092132-conversion-gate02/85/php-gulp-26-320.jpg)
![ytake
gulp.task('publish', ['bower'], function () {
var jsFilter = gulpFilter('**/*.js');
var cssFilter = gulpFilter('**/*.css');
var fontFilter = gulpFilter([
'**/*webfont*',
"**/Font*",
"**/glyphicons-*"
]);
var imageFilter = gulpFilter(['**/*.png', "**/*.gif"]);
return gulp.src(
mainBowerFiles({
paths: {
bowerDirectory: 'vendor/bower_components',
bowerrc: '.bowerrc',
bowerJson: 'bower.json'
}
})
)
.pipe(jsFilter)
.pipe(gulp.dest('public/assets/js'))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe(urlAdjuster({
replace: ['../fonts/', ''],
prepend: '/assets/fonts/'
}))
.pipe(minifyCSS({keepBreaks:true}))
.pipe(gulp.dest('public/assets/css'))
.pipe(cssFilter.restore())
.pipe(fontFilter)
.pipe(gulp.dest('public/assets/fonts'))
.pipe(fontFilter.restore())
.pipe(imageFilter)
.pipe(gulp.dest('public/images'));
});](https://image.slidesharecdn.com/phpstudygulp-150126092132-conversion-gate02/85/php-gulp-28-320.jpg)
![ytake
あとはよろしく！
gulp.task('default', ['browserSync', 'publish'], function () {
gulp.watch(['src/**/*.php'], ['phpunit']);
gulp.watch(['src/**/*.php'], ['browserReload']);
});
パターンにマッチした
ファイルが変更されたら
勝手に実行してくれます](https://image.slidesharecdn.com/phpstudygulp-150126092132-conversion-gate02/85/php-gulp-34-320.jpg)
php開発で使うタスクランナー gulp
- 1. PHP開発で使う タスクランナー GULP 第86回 PHP勉強会 YUUKI TAKEZAWA ytake
- 2. 自己紹介 なまえ: 竹澤 有貴(ytake) twitter: @ex_takezawa blog: http://blog.comnect.jp.net GitHub: https://github.com/ytake php, node.js, RDBMS, NoSQL, NewSQL Laravel JPユーザー Laravel答えないマン ytake
- 5. ytake
- 8. ytake
- 10. と思っていました 少し覚えるだけ node.jsはトモダチ(ありがとう phpstorm) angular, backboneなど使う機会が多くなった React.js便利過ぎた(ブラウザでコンパイル嫌だ sass, lessとかなんか増えてきた ytake
- 17. ytake
- 19. ytake { "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "*", "bootstrap": "*", "react": "*" } }
- 20. ytake phpのあれと同じ
- 21. ytake
- 22. 使うには？ ytake node.jsインストール npm install -g gulp npm install -g bower package.json
- 23. ytake { "devDependencies": { "bower": "1.*", "gulp": "3.*" } } $ npm install
- 24. タスク書いてみよう ytake
- 26. ytake var gulp = require('gulp'), bower = require('bower’); ! gulp.task('bower', function () { return bower.commands.install( [], {save: true}, {}) .on('end', function (data) { console.log(data); }); }); $ gulp bower
- 28. ytake gulp.task('publish', ['bower'], function () { var jsFilter = gulpFilter('**/*.js'); var cssFilter = gulpFilter('**/*.css'); var fontFilter = gulpFilter([ '**/*webfont*', "**/Font*", "**/glyphicons-*" ]); var imageFilter = gulpFilter(['**/*.png', "**/*.gif"]); return gulp.src( mainBowerFiles({ paths: { bowerDirectory: 'vendor/bower_components', bowerrc: '.bowerrc', bowerJson: 'bower.json' } }) ) .pipe(jsFilter) .pipe(gulp.dest('public/assets/js')) .pipe(jsFilter.restore()) .pipe(cssFilter) .pipe(urlAdjuster({ replace: ['../fonts/', ''], prepend: '/assets/fonts/' })) .pipe(minifyCSS({keepBreaks:true})) .pipe(gulp.dest('public/assets/css')) .pipe(cssFilter.restore()) .pipe(fontFilter) .pipe(gulp.dest('public/assets/fonts')) .pipe(fontFilter.restore()) .pipe(imageFilter) .pipe(gulp.dest('public/images')); });
- 30. ファイルの変更を監視 ytake
- 32. ytake gulp.task("phpunit", function () { var options = { debug: false, notify: true }; return gulp.src('tests/*Test.php') .pipe(plumber()) .pipe(phpunit('', options)) .on('error', notify.onError(testNotification('fail', 'phpunit'))) .pipe(notify(testNotification('pass', 'phpunit'))); }); phpunit + 通知付き
- 33. ytake ブラウザシンク gulp.task('browserSync', function () { browserSync({ open: true, port: 3001, proxy: "127.0.0.1:" + configure.php_server.port, notify: false }); }); gulp.task('browserReload', function (){ browserSync.reload(); });
- 34. ytake あとはよろしく！ gulp.task('default', ['browserSync', 'publish'], function () { gulp.watch(['src/**/*.php'], ['phpunit']); gulp.watch(['src/**/*.php'], ['browserReload']); }); パターンにマッチした ファイルが変更されたら 勝手に実行してくれます
- 37. おわり ytake