Magento 2 frontend development using Gulp and BrowserSync

We all know Magento is not the most welcoming enviroment for front-end developers. The basic set of tools that comes with the Magento 2 package is cumbersome to use and doesn't really help developers get the most out of their skill sets. Using Grunt to process LESS files is quite slow comparing to other tools that are available out there.

Luckily we're not forced to use Grunt if we don't want to. There's a plethora of different tools at our disposal that will do the job even better. One such tool that we've come to love at Rocket Web is Gulp. Gulp is a task runner that uses node.js for setting up automation of various tasks that have to be otherwise initiated manually. All you have to do is create a gulp file in which you define the tasks you want handled automatically. You can then initiate the task by running eg. gulp watch in your local project directory.

If you already know what Gulp is you can skip to the installation section for the goodies. Otherwise keep reading.

Benefits of using gulp

Using Gulp over Grunt in your project has a couple of advantages. The most important one is the speed it compiles LESS to CSS files - we've found it to be at least 3-4 times faster with standard compilation on a large project taking about 1500ms on average.

Additionally, Gulp offers a multitude (over 3,6k to be exact) of easily installable plugins, each of which offerring unique functionality - from compiling to linting, testing and cleaning up your code to even setting up local server.

What you'll need

Before you ditch your old set of tools there's a couple of things you need to know before you start using Gulp.

• You need Node.js with npm installed on your local machine. Gulp won't run without it.
• You'll also need gulp-cli installed globally. If you don't have it just run npm install -g gulp-cli from your terminal
• Finally you want to have Magento 2 project with LESS based theme (eg. Luma). If you already switched to Sass you want to check out the excellent Frontools by Snow Dog which has a lot more features that our simple setup.

Tame those browsers

Using Gulp is only the first step in pushing your workflow effeciency to the limit. The next one is setting up Browsersync. If you don't know what Browsersync is, imagine having an extra pair of hands that updates your webpage live in the browser each time you make a change - without a page refresh - in multiple browsers, simultanously. Cool, right? You only set it up once and when you run gulp watch gulp sets up a local server that listens to your code changes and updates the view automatically.

Installation and setup

Now to the interesting part. Follow the steps below to setup a gulp-based workflow in your local environment:

Step 1: Go to https://github.com/rocketweb-fed/magento2-gulpfile to get the latest version of the files

Step 2: Download gulpfile.js and package.json and put them into the root folder of your project

Step 3: Run npm install

Step 4: Create configuration file dev/tools/gulp/configs/themes.js with the following contents.

module.exports = {
 <Theme>: {
   "src": [
     "app/design/frontend/<Vendor>/<Theme-name>"
     ],
   "dest": "pub/static/frontend/<Vendor>/<Theme-name>",
   "locale": [locale,locale],
   "lang": "less",
   "area": "frontend",
   "vendor": <Vendor>,
   "name": <Theme-name>,
   "files": [
     "css/styles-m",
     "css/styles-l",
     "css/<Custom-styles>"
    ]
  }
 };

Replace strings between angle brackets with your theme data according to the information below:

• src: Array of theme and modules you want to compile
• dest: Path in pub/static of your theme
• area: area, one of (frontend|adminhtml|doc),
• name: theme name in format theme-name,
• locale: array of language to compile,
• files: Files to compile

Step 5: Create configuration file dev/tools/gulp/configs/browser-sync.js with the following contents.

module.exports = {
   proxy : "local.storeurl"
 }

Where:

• proxy: Local address of your site

Usage instructions

That's it! You're new ready to use gulp tasks in your workflow. Here's the list of tasks that are currently available to use (more to come so keep watching this space):

gulp css [--Theme-name]

Compiles less to CSS.

gulp watch [--Theme-name]

Watches for less changes in vendor modules/themes and compile them in pub/static.

gulp deploy [--Theme-name]

Clean old assets and run deployments commands.

gulp clean-cache [--Theme-name]

Clean local cache in var/page_cache/ var/cache/ /var/di/ /var/generation/

gulp clean-static [--Theme-name]

Clean static assets in pub/static

gulp browser-sync [--Theme-name]

Initiate browsersync (already included in the watch task).

Conclusion

Hope this little tutorial will help you speed up your Magento develepment process by automating repetitive tasks. Here at Rocket Web we continously work on optimizing our workflow so expect changes in our gulpfile in the future. If you do have any suggestions on how to improve it don't hesitate to make a PR on GitHub. Happy coding!