Tutorial by Examples

Loading All The Plugins from Package.JSON

Assuming , you have a grasp of how to install gulp, let us dive right down to requiring all the gulp- dependencies from package.json under your projects root folder. In case you do not have a gulpfile yet , please create an empty file with the name gulpfile.js First , we require gulp. like so: v...

Installing Plugins for Responsive images|Css Minification|Js minification

Our goal , is to Make your Images conform to widths and scale appropriately, by generating a battery of images of varied widths, and to minify them Lint your Javascript Minimize your assets - JS/CSS/HTML , thus enabling you to host a lighter than lightest code Watch the css/js/image files for ...

Anatomy of a gulp function

[Function <name>] (glob) { $.src(glob) .pipe([plugin 1]) .pipe([plugin 2]) . . . .pipe([plugin n]) .pipe( $.dest(<destination-name>) } Note pipe is a method that streams all the files matching the glob input , to our plugins( minifyhtml in this case) . It is simple ...

Asset Optimization and Minification

So, Before writing out optimiser functions , we need to install a couple of caching plugins. bash $ npm install --save-dev gulp-cached bash $ npm install --save-dev gulp-remember You might wonder why two caches eh!. gulp-cached , passes only modified or new content down the pipeline to other ...

Anatomy of a gulp task

The anatomy of a task definition is like so: $.task(<taskname> , [dependencies] , <body>); dependencies , is an array of tasks that HAVE to finish before the current task you are defining , runs. More like forcing a synchronous execution instead of the default Asynchronous functionalit...

Adding Gulp Tasks

So, we now have A function defined Above to optimise Styles A function defined Above to optimise scripts A function defined Above to optimise HTML A function to generate multiple images per image Above All we need to do now, is to invoke them when needed. Let us write our tasks according t...

Page 1 of 1

logo rip
SUPPORT & PARTNERS
STAY CONNECTED

Get monthly updates about new articles, cheatsheets, and tricks.