Usually during development in TYPO3, we need to generate compressed CSS and JS files for the website being developed to ensure the website loads faster.
Manually generating these compressed files during development is very difficult especially if you use many different JS and CSS files on your website and all these files need to be individually compressed. That is why this process needs to be automated.
Here comes in Gulp. Gulp is a task runner used for automation of time-consuming and repetitive tasks involved in web development like minification, compilation of SASS files, concatenation, etc. Go to the official gulp docs to learn more about gulp.
This article will just show you how you can setup gulp to automatically compile SCSS or SASS files and generate minified/compressed CSS and JS files in your TYPO3 projects
Install latest versions of node, npm and npx
Check if you already have node, npm and npx installed by running the commands below in the command line(terminal).
- Check for node:
node -v - Check for npm:
npm -v - Check for npx:
npx -v
If all not already installed, install as indicated below
Linux/Ubuntu
- Follow the steps here to install the latest stable version of Node.js.
Windows
For Windows, go here to download Node.js and then install it.
Install and initially setup Gulp
Follow the steps below to install and initially setup Gulp.
1. Install the gulp command line utility
npm install --global gulp-cli
2. In the project root folder of your TYPO3 project, create a folder to put in your Gulp related files for this project. For this example the folder's name will be gulp-demo. You can use any name you want.
Open your TYPO3 project's root folder in the command line and run the command below. The command creates a directory named gulp-demo and navigates into it.
mkdir gulp-demo && cd $_
3. Create a package.json file in the created gulp-demo directory
npm init
This will guide you through giving your project a name, version, description, etc. To use the default values, just press Enter untill the process is completed.
4. Install the gulp package in your devDependencies
npm install --save-dev gulp
gulp should now be installed. You can verify this by running the command below to view your gulp version. If you see version information, then gulp has been successfully installed
gulp -v
Creation of the Gulp tasks
Gulp tasks are written into a Gulp file. A Gulp file is a file with the name gulpfile.js located at the root directory of your Gulp project. In our example, that is the gulp-demo directory that was created above. Check the official Gulp docs for more information about the Gulp file.
Below is the link to a sample gulpfile.js showing how to write tasks to automatically compress CSS and JS files and also compile SCSS files. The file has been well documented using comments to explain everything happening in the file.
https://github.com/Mbigha/gulp-demo
So, create a gulpfile.js in the gulp-demo directory created in the root folder of your TYPO3 project, copy and paste in the code from the sample gulpfile.js above.
Make the neccesary adjustments based on your project. You can also remove the comments if you want.
Run the task
Open the gulp-demo folder in the command line and run the command below to run the watch task registered in the gulpfile.js file.
gulp watch
After running this command, you will see the task running information in the command line with no errors.
This means the watch task is being run and changes to your specified JS and SCSS files will automatically cause the watch task to run again.
By this, your SCSS and JS files will be automatically compiled and compressed during development hence giving you lightweight CSS and JS files. These files can be used directly on your website without you needing to do manual compiling and compression.
That is all for this post, if any questions or problems faced, please don't hesitate to write me via the contact form.