If you’ve been working with Magento 2 then you can’t have missed the great debate about whether LESS or SASS is the better css preprocessor for frontend development.

giphyIt all came about because originally, Magento 2 shipped with its base “blank” theme having been written using LESS. The community was pretty divided on whether this was the right approach or not, wars were waged, riots broke out, the landscape was looking pretty bleak. That was until a new community project was started by a Magento agency based in Poland, called Snowdog, which essentially ported the entire blank LESS theme to SASS. You can grab the SASS based version of Magento 2 Blank theme here.

This was obviously an awesome undertaking, but it did create a new problem. As well as creating the blank theme using LESS, Magento 2 also had all of the LESS preprocessing tasks baked in to the core install as well. Again, a cold war ensued as the debate around whether to leave how the files get compiled to CSS with developers or not continued to rage on. However, the new “blank” SASS theme needed to address this issue because it couldn’t use those baked in pre-processing tools. Frontools was born and a new way forward had been forged.

So what is Frontools?

Essentially, Frontools is a set of Gulp tasks specifically designed to help with the frontend development workflow when building Magento 2 websites. It can be found on github here.

Looking at the Readme included, it is immediately clear that this is quite a comprehensive set of tools. I’m not going to spend time explaining how to install them in your own project as Snowdog have kindly given us those instructions. If you really are new to Gulp though, then I would suggest having a read through some of the basics of installing and using Gulp before attempting to install these tools (Some links are provided at the end of this post) as they are more complex than your standard usage.

Out of the box we have the ability to compile our SASS styles into CSS, woohoo! But there is actually quite a lot more under the hood than just that and to fully understand the tasks list, I think its important understand the intended workflow first.

Using Frontools in your workflow

This is a very simplified version but essentially, during active development of a theme, the files you would be working on would be found in app/design/frontend/your-theme-package/your-theme-folder/styles/. But the actual files that are used when you load your website are served from pub/static/frontend/your-theme-package/your-theme-folder/. For more information on how this really works, check out the Magento 2 developer docs here.

As part of the workflow process, as well as being compiled from SASS to CSS, your files are linted, run through CSS optimisation tasks to add features like auto prefixing and removing unused styles and then flagged as production ready and copied to pub/static.

Running any of the following will compile the SASS, create production ready files and copy them to pub/static. Depending on which task you ran it will also do number of the other tasks as well.

  • gulp styles
  • gulp dev
  • gulp watch
  • gulp release

gulp styles is the core task in this list. When run it will:

  1. Create all necessary symlinks to the pub directory
  2. lints the SASS files (if enabled)
  3. Compiles the SASS to CSS
  4. Creates sourcemaps,
  5. Runs any plugins (such as cssnano) to auto prefix styles, remove unused styles and white space etc.
  6. Set Browsersync running
  7. lints the resulting CSS files (if enabled)

gulp watch then watches your chosen theme and when changes are made runs gulp styles and disables linting (for quicker processing as this will run every time you change a file)
gulp dev does all of the above but also runs a task called inheritance to ensure there are no theme inheritance issues
gulp release does all of the above but also cleans the pub/static folder before deploying the production ready code

If you are having caching issues or not seeing your changes updating locally then running gulp clean and gulp deploy manually are especially helpful. gulp clean will completely remove the pub/static folder and gulp deploy will only deploy production ready files to pub/static rather than running all the other tasks when they’re not needed as well.

Features

Some of my favourite features when doing any front end development is the ability to use sourcemaps and also Browsersync. I can’t stress enough how much time these two features save alone. Luckily both are included in Frontools. Sourcemaps are automatically generated when any of the four gulp tasks above are run, allowing you to easily find styles when inspecting a web page using dev tools.

Sourcemaps showing the line number in styles.scss

Sourcemaps showing the line number in styles.scss

Browsersync is also really, really handy. What it does is it allows you to synchronise browser testing across multiple screens and devices. It can also do live refreshes when you change things too, which is pretty nifty. To set up Browsersync all you need to do is change the proxy URL specified in dev/tools/frontools/config/browser-sync.json to the URL of your local Magento 2 install. Here at Fisheye we use Vagrant boxes for local environments so the contents of our file would look something like:

{
“proxy”: “client.fisheye.dev”
}

If you use MAMP Pro then the proxy would be the server name you have set up in hosts (I’m assuming XAMP and other Window’s options would be the same – I’m a Mac user! 😃).

There is also SASS Linting, CSS Linting and JS linting which will run at different times depending on which task you are running. These are useful because not only do they lint your code, they tend to give you more descriptive messages if there are any errors. And lastly, but definitely not least is the really powerful CSSNANO. I’ve already hinted at the ability to auto prefix your CSS and also remove white space etc. This is what this plugin does. Once your SASS has been processed but before the files are copied to pub/static, the CSS will be run through many focussed optimisations to ensure the final result is as small as possible for production. I won’t list the features here but they are all listed on their website.

So thats it. Hopefully this article has given a reasonable overview of what Frontools is and how it should be used when you develop Magento 2 websites.  😃

Some Useful Links