Web_Designer_UK__May_2018

Developer tutorials
Automate your workflow with Gulp
method accepts two parameters, a task name and a
function specifying what it should do. In the function, we
then simply tell it to delete the directory we’ve assigned
tothe‘dist’variableusingthe‘del’functionwe’vejust
imported.Inthesnippet,there’salsoahelpfulemoticonpowered‘console.log’whichwillsendfeedbacktothe
Terminal.Thefirstofmany.
gulp.task(‘deleteDist’, function(){
console.log(`Deleting old ‘${dist}’
directory `);
return del(dist);
});
7. CompileSASSwithGulp–part1
Asmentioned,Gulpcanbeusedwiththepreprocessor
SASS to automate the compiling of SCSS files into CSS. To
do this, we’ll be installing more dependencies. ‘gulp-sass’
isagulpwrapperfornode-sass.‘gulp-sass-glob’enables
ustouseglobbingpatternsinourSASStoimportmany
filesatonceusingwildcardcharacters(See‘/dev/sass/
main.scss’).Finally,‘gulp-autoprefixer’addsvendor
prefixestothecompiledCSSbasedonbrowserusage
data.Addthemallintheusualmanner,asbelow.
npm install gulp-sass gulp-sass-glob
gulp-autoprefixer -D
Thenaddittoourlistofdependencyimports.
const sass = require(‘gulp-sass’);
const sassGlob = require(‘gulp-sass-glob’);
const autoprefixer = require
(‘gulp-autoprefixer’);
8. Compile SASS with Gulp – part 2
Now we’ve installed the SASS dependencies, create a new
task called ‘sass’. Within it, use Gulp’s ‘src()’ method to grab
all the SCSS files from our root ‘sassDev’ directory, and
Running tasks
At any point in this tutorial, if you need to test that a
Gulp task is working correctly, run it by typing ‘gulp
my-task-name’ in the Terminal.
then — using Node’s ‘pipe()’ method — pass them to
sassGlob so their own SASS imports can be parsed in
preparation for compile.
gulp.task(‘sass’, function() {
console.log(‘Compiling SASS ’)
return gulp.src(`${sassDev}/*.scss`)
.pipe(sassGlob())
});
9. Compile SASS with Gulp – part 3
Next, pipe our stylesheet to gulp-if, which looks at the
truthiness of the minify variable from Step 4, and then
compiles the SASS either in a compressed (AKA minified)
state or an expanded state. Let’s then pipe the compiled
CSS to the rename dependency, which will add a ‘.min’
filename prefix if required.
.pipe(gulpif(minify, sass({outputStyle:
‘compressed’, precision: 8}), sass
({outputStyle: ‘expanded’, precision: 8})))
.pipe(gulpif(minify, rename({ suffix: ‘.min’
})))
If ‘minify’ is true, we’ll have a stylesheet called ‘main.min.
css’ in the Node.js stream. If there were compile errors, it’s
important that we print these to the Terminal with the
‘.on()’ method. Pipe the stylesheet to autoprefixer for
vendor prefixing, and then finally send it to gulp’s ‘dest()’
method, which places it in the correct ‘dist’ directory, as
defined back in Step 3.
.on(‘error’, sass.logError)
.pipe(autoprefixer({
browsers: [‘last 2 version’],
cascade: false
}))
.pipe(gulp.dest(sassDist))
10. Implementing UnCSS
With Gulp, we can also leverage a powerful plugin called
UnCSS, which analyses HTML files and then removes any
unused styles from our CSS. Among other advantages,
this is great way to reduce stylesheet file sizes. As usual,
install the dependency like so:
npm install gulp-uncss -D
Then add UnCSS to our list of dependency imports.
const uncss = require(‘gulp-uncss’);
Now create a new Gulp task called ‘uncss’ and grab any
CSS files from the ‘sassDist’ directory using ‘src()’. Next,
after piping these to UnCSS, we have to tell the plugin
where our HTML is located so that it can be analysed,
before sending the edited CSS files back to ‘sassDist’
using the ‘dest()’ method.
gulp.task(‘uncss’, function() {
console.log(‘Removing unused CSS ’)
return gulp.src(`${sassDist}/*.css`)
.pipe(uncss({
html: [`${htmlDist}/*.html`]
}))
.pipe(gulp.dest(sassDist))
});
11. Image optimisation
Another useful thing we can automate in Gulp is lossless
image optimisation. It requires ‘gulp-imagemin’, which we
should install in the usual way and then include in the
gulpfile as a dependency called ‘imagemin’. Create a new
task called ‘images’, use ‘src()’ to grab any bitmap images,
and then pass these to imagemin.
gulp.task(‘images’, function(){
console.log(‘Optimising bitmaps ’);
return gulp.src
(`${imgDev}/*.+(png|jpg|jpeg|gif)`)
.pipe(imagemin([
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5})
], { verbose: true }))
.pipe(gulp.dest(imgDist));
});
12. Bundling JavaScript – part 1
If you open ‘/dev/js/main.js’ you’ll see ‘require’ statements,
which import project functionality. We can automate the
bundling of these into one concatenated, minified file
using Browserify. Using Babelify, we can also auto
transpile any ES6 JavaScript into JS, which older browsers
can understand. Let’s install some dependencies.
Above
When you run ‘gulp dev’ in the Terminal after finishing the
tutorial, you should see the results of the build process in
the Terminal, including the feedback we’ve been adding
via ‘console.log’ statements.
Right
Since the ‘serve’ task has created a local server, you’ll also
see the finished result running live at the localhost port
mentioned in the Terminal. This is typically ‘localhost:8000’.
82__________________________________________________tutorial