Automating Your Workflow with Gulp.js - php[world] 2016

Automating Your
Workflow with Gulp.js
php[world] 2016
@colinodell - joind.in/talk/17992

Colin O’Dell
• Lead Web Developer at Unleashed Technologies
• PHP League Member
 league/commonmark
 league/html-to-markdown
• PHP 7 Upgrade Guide e-book

Agenda
• What Are Task Runners?
• Getting Started with Gulp.js
• Gulp API
• Task Examples
• Q&A

What Are Task Runners?
Software that automates, coordinates, and controls the
process of running build tasks.
• Define tasks & dependencies
• Execute those tasks

What Are Task Runners?
Three types of tasks:
1. Tranformations
2. Tests
3. Commands

Transformations
• Compiling SASS/LESS, CoffeeScript, etc.
• Combining/minifying files
• Compressing images
• Copying files to a different location
0110011
1001111
0010011
1010010
0110011
1001111
0010011
1010010

Running Tests
• Linting for syntax errors
• Checking code styles
• Running automated tests (unit, functional, etc)
0110011
1001111
0010011
1010010
✓✗

Running Misc. Commands
• Deleting previous builds
• Installing dependencies with Composer, npm, bower, yarn, etc.
• Any shell command
✓✗

0110011
1001111
0010011
1010010
0110011
1001111
0010011
1010010
0110011
1001111
0010011
1010010
✓✗
✓✗

When/Where To Run Build Tasks
• Locally during development
• Continuous integration
• Deployments

Different Task Runners
Comparison between Apache Ant, Phing, Grunt, and Gulp

Apache Ant
• Like Make, but built in Java
• Typically installed via package manager (apt-get)
• XML configuration files
<?xml version="1.0"?>
<project name="Hello World Project" default="info">
<target name="info">
<echo>Hello World - Welcome to Apache Ant!</echo>
</target>
</project>

Apache Ant
<project name="Compress CSS and run PHPUnit" default="build">
<target name="build" depends="compress_css,phpunit"/>
<target name="compress_css">
<apply executable="java" parallel="false">
<fileset dir="." includes="foo.css, bar.css"/>
<arg line="-jar"/>
<arg path="yuicompressor.jar"/>
<srcfile/>
<arg line="-o"/>
<mapper type="glob" from="*.css" to="*-min.css"/>
<targetfile/>
</apply>
</target>
<target name="phpunit">
<exec executable="./vendor/bin/phpunit" failonerror="true">
<arg value="--configuration"/>
<arg path="phpunit.xml"/>
</exec>
</target>
</project>

Phing
• Based on Apache Ant, but built in PHP
• Typically installed via PEAR or Composer
• XML configuration files
<project name="Hello World Project" default="info">
<target name="info">
<echo>Hello World - Welcome to Apache Ant!</echo>
</target>
</project>

Grunt
• Built in JavaScript
• Many third-party plugins; easy to install
• JS-based configuration with heavy JSON usage
var grunt = require('grunt');
grunt.registerTask('default', 'The default build task', function(){
console.log('Hello World!');
});

Gulp.js
• Built in JavaScript
• Many third-party plugins; easy to install
• Uses JS code instead of configuration
• Built around file streams
var gulp = require('gulp');
gulp.task('default', function() {
console.log('Hello world.');
});

0110011
1001111
0010011
1010010
0110011
1001111
0010011
1010010
0110011
1001111
0010011
1010010
0110011
1001111
0010011
1010010
{ … }
0110011
1001111
0010011
1010010

Getting Started with
Gulp.js

Installing gulp-cli

Initializing npm

Adding gulp to a project

gulpfile.js
// place code for your default task here
});

gulpfile.js

Gulp API

gulp.task(name [, deps] [, fn])
• Defines tasks and their dependencies
• Three parameters:
 Name (required)
 Array of task dependencies
 Function to run
gulp.task('sometask', function() {
// Do stuff
});
gulp.task('sometask', ['dep1', 'dep2'], function() {
// Do stuff
});
gulp.task('js', ['jshint', 'jsmin']);

gulp.src(globs [, options])
• Two parameters:
 Globs of files (required)
 String or array
 Options
• Returns a stream of Vinyl files that can be piped to plugins
gulp.src('styles/foo.css')
gulp.src('styles/*.css')
gulp.src('styles/**/*.css')
gulp.src(['styles/**/*.css', '!*.min.css'])

.pipe(destination)
• Called on gulp.src() result stream
• destination is a stream (typically an input stream created by a plugin)
.pipe(minifycss())

gulp.dest(path [,options])
• Writes the streamed files to the given path
.pipe(minifycss())

Examples
Code Linting

jshint
var jshint = require('gulp-jshint');
gulp.task('jshint', function() {
return gulp.src(paths.js)
.pipe(jshint())
.pipe(jshint.reporter())
.pipe(jshint.reporter('fail'));
});

jshint

csslint
var csslint = require('gulp-csslint');
gulp.task('csslint', function() {
return gulp.src([paths.css, '!**/*.min.css'])
.pipe(csslint('.csslintrc'))
.pipe(csslint.reporter())
.pipe(csslint.failReporter());
});

phplint
var phplint = require('gulp-phplint');
gulp.task('phplint', function() {
return gulp.src(paths.phpLint)
.pipe(phplint())
.pipe(phplint.reporter('fail'));
});

phpcs
var phpcs = require('gulp-phpcs');
gulp.task('phpcs', ['phplint'], function() {
var options = {
bin: 'vendor/bin/phpcs',
standard: 'PSR2
};
return gulp.src(paths.php)
.pipe(phpcs(options))
.pipe(phpcs.reporter('log'))
.pipe(phpcs.reporter('fail'));
});

eol
var eol = require('gulp-eol-enforce');
gulp.task('eol', function(){
var paths = [].concat(paths.php, paths.less, paths.js, paths.xml);
return gulp.src(paths)
.pipe(eol('n'));
});

'lint' task group
gulp.task('lint', ['eol', 'phpcs', 'csslint', 'jshint']);
gulp.task('lint', function() {
gulp.start('eol', 'phpcs', 'csslint', 'jshint');
});

Examples
Transformations

Compile, autoprefix, and minify LESS
var autoprefixer = require('gulp-autoprefixer'),
less = require('gulp-less'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename')
;
gulp.task('less', function() {
return gulp.src(paths.less)
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 3 versions', 'ie >= 8']
}))
.pipe(minifycss())
.pipe(gulp.dest(paths.distCSS));
});

Compile, autoprefix, and minify SASS
var autoprefixer = require('gulp-autoprefixer'),
sass = require('gulp-sass'),
rename = require('gulp-rename')
;
gulp.task('sass', function() {
return gulp.src(paths.sass)
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 3 versions', 'ie >= 8']
}))
.pipe(minifycss())
.pipe(gulp.dest(paths.distCSS));
});

Compressing Images
var imagemin = require('gulp-imagemin');
gulp.task('images', function () {
var options = {
svgoPlugins: [{removeViewBox: false}]
};
return gulp.src(paths.img)
.pipe(imagemin(options))
.pipe(gulp.dest(paths.distImg));
});

Examples
Unit Tests

PHPUnit Tests
var phpunit = require('gulp-phpunit');
gulp.task('phpunit', function () {
return gulp.src('phpunit.xml')
.pipe(phpunit('./vendor/bin/phpunit', {notify: true}));
});

Examples
Command Line Scripts

Run Shell Commands
var shell = require('gulp-shell');
gulp.task('deps', shell.task([
'composer install',
'npm install',
'bower install'
]));

Examples
Task Groups

Task Groups
gulp.task('lint', function() {
gulp.start('eol', 'phpcs', 'csslint', 'jshint');
});
gulp.task('build', function() {
gulp.start('css', 'images', 'js', 'fonts', 'favicons');
});
gulp.task('test', function() {
gulp.start('lint', 'phpcs');
});
gulp.start('test', 'build');
});

Useful Utilities

gulp-changed
var options = {
};
});

gulp-changed
var changed = require('gulp-changed');
var options = {
};
.pipe(changed(paths.distImg))
});

gulp-newer
var newer = require('gulp-newer');
var concat = require('gulp-concat');
gulp.task('concat', function() {
return gulp.src('lib/*.js')
.pipe(newer('dist/all.js'))
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'));
});

var uglify = require('gulp-uglify');
gulp.task('build-js', function() {
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(gulp.dest(paths.distJs));
});
gulp-sourcemaps

var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('build-js', function() {
.pipe(sourcemaps.init())
.pipe(concat('app.js'))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.distJs));
});
gulp-sourcemaps

gulp-load-plugins
{
"devDependencies": {
"gulp": "~3.9",
"gulp-autoprefixer": "~2.3.1",
"gulp-bower": "~0.0.10",
"gulp-changed": "~1.2.1",
"gulp-csslint": "~0.1.5",
"gulp-eol-enforce": "*",
"gulp-imagemin": "~2.3.0",
"gulp-jshint": "~1.11.2",
"gulp-less": "~3.0.3",
"gulp-minify-css": "~1.2.0",
"gulp-phpcs": "~0.6.0",
"gulp-rename": "~1.2.2",
"gulp-uglify": "~1.2.0"
}
}
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
bower = require('gulp-bower'),
changed = require('gulp-changed'),
csslint = require('gulp-csslint'),
eol = require('gulp-eol-enforce'),
imagemin = require('gulp-imagemin'),
jshint = require('gulp-jshint'),
less = require('gulp-less'),
phpcs = require('gulp-phpcs'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');

gulp-load-plugins
{
"devDependencies": {
"gulp": "~3.9",
"gulp-autoprefixer": "~2.3.1",
"gulp-bower": "~0.0.10",
"gulp-changed": "~1.2.1",
"gulp-csslint": "~0.1.5",
"gulp-eol-enforce": "*",
"gulp-imagemin": "~2.3.0",
"gulp-jshint": "~1.11.2",
"gulp-less": "~3.0.3",
"gulp-minify-css": "~1.2.0",
"gulp-phpcs": "~0.6.0",
"gulp-rename": "~1.2.2",
"gulp-uglify": "~1.2.0"
}
}
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')();
// ...
.pipe(plugins.changed('app.css'))
.pipe(plugins.less())
// ...

gulp.watch(paths, tasks)
gulp.task('watch', function() {
gulp.watch(paths.less, ['css']);
gulp.watch(paths.img, ['images']);
gulp.watch(paths.js, ['js']);
gulp.watch(paths.font, ['fonts']);
gulp.watch(paths.favicons, ['favicons']);
gulp.watch(paths.php, ['phpcs']);
});

gulp.watch(paths, tasks)
• Example: https://youtu.be/9d9756j2pq8?t=100

Other Plugins & Integrations
• Browsersync – Live browser reloads
• gulp-notify – Sends notifications to OS notification center or Growl
• gulp-autopolyfiller – Like autoprefixer, but for JS polyfills
• gulp-git – Run Git commands within Gulp
• gulp-ssh – Connect to servers via SSH and SFTP

Summary
• Task runners help automate build processes
• Automate during development, CI, and deployment
• Gulp is fast, easy-to-use, and has tons of great plugins

Questions?

Thanks!
Slides/Feedback:
https://joind.in/talk/17992

Automating Your Workflow with Gulp.js - php[world] 2016

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Automating Your Workflow with Gulp.js - php[world] 2016

Similar to Automating Your Workflow with Gulp.js - php[world] 2016 (20)

More from Colin O'Dell

More from Colin O'Dell (20)

Recently uploaded

Recently uploaded (20)

Automating Your Workflow with Gulp.js - php[world] 2016

Editor's Notes