DS Log

In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.

Tuesday, July 16, 2024

How "gulp" you are

Gulp is a small js program (something like make from the C language) that we can configure to monitor changes in files, to merge/filter files and finally, which we can connect/synchronize with browser-sync to get a display of changes in the browser without refreshing. In the example, I also use PostCSS. PostCSS is a tool through which, as a filter, we can apply CSS minify as well as many other extensions such as the Autoprefixer extension that helps maintain compatibility with older browsers.

Installation

First we need to install gulp (terminal version):

 sudo npm install gulp-cli -g 

An archive with an example can be found here . Of course, you need to unpack the archive and run the command inside:

 npm install 

After installation, follow the command:

 gulp 

'gulp' opens the browser and page. And now when we edit:

 ./pcss/module.css  

and change the css:

 background:green; 

the whole thing is "compiled" and we immediately see the changes in the browser.

gulpfile.js

" gulpfile.js " is a file in which we determine when and how certain actions will take place.

Watch

With the 'watch' function we monitor changes in a specific directory and as a second argument we add the name of the function that is called after a change occurs.

Tasks

In task functions we specify… tasks. So, for example, 'cssTask' monitors changes in the 'pcss' directory and after changes filters CSS files through the autoprefixer extension and transfers them to the 'css' directory.

 function cssTask(){
  return src('./pcss/*.css', { sourcemaps: true })
    .pipe(postcss([autoprefixer()]))
    .pipe(dest('css', { sourcemaps: '.' }));
} 

The 'watchTask' task monitors changes in ./index.html and calls 'browsersyncReload'. The second 'watch' function monitors changes in the 'pcss' directory and calls the 'cssTask' and 'browsersyncReload' functions.

Browser-sync functions

'browsersyncServe' function starts the server and 'browsersyncReload' refreshes the html in the browser.

Exports

Finally, we export tasks and the 'browsersyncServe' init function through the 'series' function, which serially calls functions (executes tasks) when we type 'gulp' in the terminal.

posted by damirs @ July 16, 2024