At Boann we are constantly looking for ways to work more efficiently and improve our workflow.
Building websites is largely repetitive in the basics: almost every website has buttons, tables, a contact form, a navigation and so on.
Especially if you have been developing websites for some time, you will begin to see certain patterns in that building.
Gulp helps you save time and prevents you from having to do everything completely manually at every site.
A brief introduction
The great thing about Node is that the community has jumped a lot and has built a framework in 6 years with which you can do just about anything. In other words – under the heading of local ‘build streaming’ – use Gulp.
The concept of Gulp
Gulp is essentially a simple package, making it easy to pick up. In Gulp three concepts are central: packages, tasks and watchers.
Because Node – and therefore also Gulp – consists of packages, we can easily compose a collection that does exactly what we want.
We do this in the terminal with the following command: npm install –save-dev It is installed in a few seconds and you can start.
Packages are available in all shapes and sizes. From functional packages (for example front-end developers) to so-called ‘dependencies’: packages with functionality on which other packages can be based.
You compose a web of all modules, as it were, and thus have full control over what happens. We do this with a Gulpfile: a project file with which we tell Gulp which packages they all have to load.
A few packages that we use daily at BOANN:
BOANN works with almost all websites with SASS – a so-called CSS preprocessor – with which we add extra skills and order to our CSS. Gulp-sass makes sure that our SASS code is converted into (useful for the browser) CSS.
The speed of websites is becoming increasingly important. That is why it is important for web developers to ensure that their code ends up with the end user as optimally and as little as possible, so that it does not have to wait long for the site to load. gulp-minify-css is the package we use to perform this optimization for our CSS code.
At the moment there are four internet browsers for which it is advisable to optimize: Google Chrome, Mozilla Firefox, Apple Safari and Microsoft Internet Explorer. These often have their own nuances within CSS and developers spend a lot of time optimizing for outdated browser versions. Autoprefixer is a package that fully automates this problem; you can indicate exactly which versions of which browsers you want to support and then the optimization runs automatically.
Suppose you collect all the packages you want to use and you put them together in the Gulpfile. All information is then present in the file, but you still have no way to tell the collection what it should do exactly.
This is where Tasks comes to the rescue. With Tasks, or ‘tasks’, we tell Gulp what exactly to do and with which packages. A typical task looks like this:
We first create a ‘build’ task, then specify a source file with ‘src’ (the global SCSS file) and then use three ‘pipes’ to make edits on this source file. There is always only one source file, but there are infinitely many pipes to define. A pipe uses one of the many packages that we have spoken before.
Finally, many Gulp files contain so-called watchers: a concept with which Gulp goes into third gear.
A watcher ‘looks’ at a file or set of files, notices when changes occur and, if necessary, makes himself heard.
How the watcher reports to you, you can define yourself with an action. This is, for example, a notification such as “Hi boann, this file has been modified” or the execution of a task. Thanks to the task-link, we can realize the following workflow with our CSS code: