Gulp — wrestling in build wars

Key features

1) Efficiency

Using the power of node streams, gulp gives fast builds that don’t write intermediary files to disk.

2) High Quality

By enforcing strict plugin guidelines, it is ensured that plugins stay simple and work as expected.

3) Easy to use

By preferring code over configuration, gulp keeps things simple and makes complex tasks manageable.

4) Easy to learn

Using node best practices and maintaining a minimal API surface, your build works exactly as you would imagine.

Introduction

1) Apart from javascript, Gulpfile.js can also be used to automate some of your .Net/c# tasks.

2) You can also use it on php projects.

3) Gulp’s support for php, being in it’s starting phase, it’s too early to comment on which to choose -> grunt or gulp.

4) The minimum requirement to have Gulp.js is

a) to have the node package installed

i. npm install –g gulp

Installed location-> usr/lib/node_modules/gulp

ii. npm install — save-dev gulp (This adds packages in node-modules i.e entries are made in package.json of the module installed under dev-dependencies)

b) having the gulpfile.js in place in the root of your project folder.

c) Creation of “package.json” and having all dependencies and dev-dependencies, to be required, defined in it .

Command -> npm init

Build wars — Grunt v/s Gulp

· The difference between Gulp.js and Grunt.js can especially be noticed when working on larger projects, with huge amounts of files.

· Gulp’s use of node & its modules has made code more simplified & easy to debug.

· In gulp,the concept of pipes is something which has made it actually possible to perform the basic CI process through a single task.

· Gulp is “code over configuration” i.e the CI script contains the simple “what’s” of the process and the configurations can be separated out in separate files which can be easily required as modules.

· To understand Gulp you need to understand Node Streams. All Gulp plugins are just through streams that read in data and output data. Everything can be processed in memory, with the output of one stream piped as input to another, much like Unix pipes.

This gives Gulp a huge speed advantage over Grunt, because I/O is very expensive when compared to in-memory operations. On top of that, Grunt has to compile all the files even if only one has changed, which adds additional build time.

In Grunt, we must write intermediary files to disk

In Gulp, we pipe the intermediary files in-memory to other streams

Gulp CI

1) Create project-directory.

2) Create package.json and define dev-dependencies.

Command -> npm init

3) Install gulp in project directory.

Command -> npm install — save –dev gulp

4) Create phpunit.xml file for unit-testing & add it in project directory.

5) Install composer in project directory.(for using the packages like phpdox, phpunit, phpcs, etc.)

Command -> sudo curl — sS https : // getcomposer.org/installer|php

6)Create composer.json file in project directory.

Command -> composer init

Note-> Interatively, add the packages(phpcs,phpunit,phpdox,phpcpd,sonar) in composer.json

7)Command -> composer require — -dev “squizlabs/php-codesniffer”

This creates a vendor/bin folder with all the required executables of the packages(phpcs,phpunit,phpdox,phpcpd,etc..) in it.

8)Create gulpfile.js & perform unit-testing, code-coverage & static code analysis by adding & checking execution of tasks one by one

9) “gulp-PHPCS” Task

Execute Command ->

npm install — — save-dev gulp-phpcs (add dev-dependency of phpcs to package. json)

Task added ->

//PHP CodeSniffer

gulp.task(‘checkstyle’, function () {

//return gulp.src([‘./src/**/*.php’])

return gulp.src(config1.all)

.pipe(phpcs({bin: ‘vendor/bin/phpcs’, standard: ‘PSR2’,

warningSeverity: 0}))

.pipe(phpcs.reporter(‘log’));

});

Execute Command ->

gulp checkstyle

Note ->In order to check correct working of phpcs, create an file which violates coding-standards.

10) “gulp-PHPUNIT” Task

Execute Command ->

npm install — — save-dev gulp-phpunit (add dev-dependency of phpunit to package. json)

Task added ->

//PHPUnit-phpunit.xml

gulp.task(‘phpunit’, function() {

gulp.src(‘phpunit.xml’)

.pipe(phpunit(‘’, {notify: true}));

});

Execute Command ->

gulp phpunit

Note ->

· Unit tests executed,

· code-coverage done with a folder called “coverage” being created containing coverage details,

· Reports — clover.xml,crap4j.xml & junit.xml are generated.

11) “gulp-sonar” Task

Execute Command ->

npm install — — save-dev gulp-sonar (add dev-dependency of sonar to package. json)

Task added ->

//gulp-sonar

gulp.task(‘sonar’, function () {

var options = {

sonar: {

host: {

url: ‘http://172.27.59.62:9080'

},

jdbc: {

url: ‘jdbc:mysql://172.27.59.62:3306/sonar’,

username: ‘sonar’,

password: ‘sonar’

},

projectKey: ‘sonar:gulp-sonar-runner:1.0.0’,

projectName: ‘Pallavi-gulp’,

projectVersion: ‘1.0.0’,

// comma-delimited string of source directories

sources: ‘src’,

language: ‘php’,

sourceEncoding: ‘UTF-8’,

javascript: {

lcov: {

reportPath: ‘./sonar_report/lcov.info’

}

}

}

};

// gulp source doesn’t matter, all files are referenced in options object above

return gulp.src([‘./src/**/*.php’])

.pipe(sonar(options))

.on(‘error’, util.log);

});

Execute Command ->

gulp sonar

***Note -> Step to set-up sonarQube and start service are

· While creation of composer.json file, sonar must be interatively added to it as a package to be required.

· After adding the sonar dependency in package.json, sonar database have to be created by following commands->

mysql –uroot –ppassword

CREATE DATABASE sonar CHARACTER SET utf8 COLLATE utf8 generalci;

CREATE USER ‘sonar’ IDENTIFIED BY ‘sonar’;

GRANT ALL ON sonar .* TO ‘sonar’ @ ‘%’ IDENTIFIED BY ‘sonar’;

FLUSH PRIVILEGES;