Server Side
Now Reading
GULP
0

GULP

by Adrian RandallMay 13, 2015

Gulp  is a useful way to minify code, uglify javascript, watches files and allows live reload to the the browser when files have been changed.

The following are steps how to install gulp via terminal
1. Install gulp globally
$ npm install –global gulp
2. Install gulp in your project devDependencies:
$ npm install –save-dev gulp
3. Create a gulpfile.js at the root of your project:

This area  is a gulp plugin scans your WordPress project source files and generates a single js file.
var gulp = require( ‘gulp’ ),
plumber = require( ‘gulp-plumber’ ),
watch = require( ‘gulp-watch’ ),
livereload = require( ‘gulp-livereload’ ),
minifycss = require( ‘gulp-minify-css’ ),
jshint = require( ‘gulp-jshint’ ),
stylish = require( ‘jshint-stylish’ ),
uglify = require( ‘gulp-uglify’ ),
rename = require( ‘gulp-rename’ ),
notify = require( ‘gulp-notify’ ),
sass = require( ‘gulp-sass’ );

var sourcemaps = require(‘gulp-sourcemaps’);
var concat = require(‘gulp-concat’);
var onError = function( err ) {
console.log( ‘An error occurred:’, err.message );
this.emit( ‘end’ ); }
Input the path of the scripts you want to minify scss and javascript files
var paths = {
scripts: [
(this is an example) ‘wp-content/themes/gadgetine-theme/js/modernizr.custom.50878.js’,
],
(this is an example) scss: [‘wp-content/themes/gadgetine-theme-child/scss/styles.scss’
]
}

Now in our gulpfile.js we need to require()


gulp.task( ‘scss’, function() {
return gulp.src( ‘wp-content/themes/gadgetine-theme-child/scss/styles.scss’ )
.pipe( plumber( { errorHandler: onError } ) )
.pipe( sass() )
.pipe(concat(‘wp-content/themes/gadgetine-theme/css/main-stylesheet.css’))
.pipe( gulp.dest( ‘wp-content/themes/gadgetine-theme-child’ ) )
.pipe( minifycss() )e the sass plugin and then tell gulp what to do with our files. Here is our updated gulpfile.js
.pipe( rename( { suffix: ‘.min’ } ) )
.pipe( gulp.dest( ‘wp-content/themes/gadgetine-theme-child’ ) )
.pipe( livereload() );
} );

This section Minifies and copies all JavaScript (except vendor scripts) with sourcemaps all the way down
gulp.task(‘scripts’, function() {
// Minify and copy all JavaScript (except vendor scripts) with sourcemaps all the way down
return gulp.src(paths.scripts)
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(concat(‘js/all.min.js’))
.pipe(sourcemaps.write())
(this is an example)  .pipe(gulp.dest(‘wp-content/themes/gadgetine-theme-child’));
});

Rerun the task when a file changes the watch function
gulp.task(‘watch’, function() {
gulp.watch(paths.scripts, [‘scripts’]);
gulp.watch(paths.scss, [‘scss’])
});

In terminal write:
gulp watch

About The Author
Adrian Randall
I'm a digital marketing specialist, love working on digital business and coding on just about anything. I'm the founder of Arcadian Digital and this site shares some of our knowledge and practices.

Leave a Response