Integrating Gulp SCSS in Astroid Template

Integrating Gulp with Astroid

By Default, Astroid Template structure doesn't have built in support for gulp, Astroid Framework uses its own scss structure and PHP libraries is used to compile scss at the run time but you can still Integrate gulp with any Astroid Template.

Note: In order to integrate Gulp with Astroid Template you first need to have Node.js (Node) installed onto your computer before you can install Gulp.

1. Setup SCSS file

As discussed above, Astroid Framework follow its own scss compiling system and it compile scss/style.scss by default. So, first we need to copy scss/style.scss into scss/stylesheet.scss and than remove all content from scss/style.scss.

2. Setting up Gulp

To setup Gulp with any Astroid Template follow the steps in JOOMLA_ROOT/templates/YOUR_ASTROID_TEMPLATE folder.

First, run the npm init command inside your astroid template folder.

# ... within your astroid template folder
$ npm init

Then run below command in order to install gulp and gulp-sass devDependencies

# ... within your astroid template folder
$ npm install gulp gulp-sass --save-dev

Now, let's create a new file gulpfile.js to configure your Gulp tasks.

// gulpfile.js in your astroid template folder
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
   return gulp.src('scss/stylesheet.scss')
           .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
           .pipe(gulp.dest('css'));
});

gulp.task('sass:watch', function () {
   return gulp.watch('scss/stylesheet.scss', gulp.series('sass'));
});

Run gulp task in the command line.

# ... within your astroid template folder
$ gulp sass

or you can watch using

# ... within your astroid template folder
$ gulp sass:watch

By running in the command line, you should now be able to see that a your compiled css at css/stylesheet.css. See next and last step to load into your Astroid template.

3. Load CSS

In order to load stylesheet.css into Astroid template open index.php file located at JOOMLA_ROOT/templates/YOUR_ASTROID_TEMPLATE/index.php and find the below code line.

// Astroid Assets
$template->loadTemplateCSS('custom.css');

To load stylesheet.css, Add file into function. See below

// Astroid Assets
$template->loadTemplateCSS('stylesheet.css', 'custom.css');

Great! We're done with Integrating Gulp with Astroid Template.