Gulp is a Task / Build runner. It’s easy to use, has a simple api, and is efficient. Gulp.js makes use of pipes for streaming data that needs to be processed.
But as designer you don’t actually need to know any of that. What you do need to know is that Gulp will make your life much easier.
This tutorial will setup Gulp to do 3 things:
- Compress js
- Compile Less
- Browser livereload
Installing Gulp and Gulp plugins
1. Install gulp globally:
You’ll probably need to
sudo this one.
cd to your project directory and install the dependencies and plugins
2. Install gulp in your project devDependencies:
3. Install gulp less plugin
4. Install gulp uglify plugin for js
5. Install gulp plumber to output errors
6. Install gulp browsersync for live reload
On the root of your project create a .js file name
gulpfile.js, and paste this snippet
Open terminal and run
And now the magic starts. This will do:
- Compress any .js files on /js folder and store them on /js/minjs
- Compile any .less files on /less folder and create a .css file on /css
- Open a browser with your index.html
- Watch for changes on your js file and compress it every time you save it
- Watch for changes on your less file and compile it every time you save it
- Auto reload the browser every time the less file is updated.
More magic! Awesome livereload with Browsersync
You’ve just installed BrowserSync, its a time-saving synchronised browser testing.
BrowserSync makes your tweaking and testing faster by synchronising file changes and interactions across multiple devices. It’s wicked-fast and totally amazing.
You’ll be able to view your project at this address
http://localhost:3000/ and you’ll find browser sync configurations at
http://localhost:3001/. On that seetings page you’ll find a IP address to sync on your mobile device among other amazing features.
There are also Gulp plugins for Sass or Stylus and with little changes on this code you can implement them.
Once you save your less file, it will overwrite any change you do directly on the css. So remember to do styling changes on less and never edit the css file and you’ll be fine.