Gulp Task Runner

Drupal Themes

We use Gulp to automate repetitive tasks. Once very common use case is compiling SCSS to CSS for theme development.

To Use:

1. Install the package.json file in the theme root.

2. Install the packages with npm install.

3. Create your gulpfile.js in the theme root. Use this as a start:

   // Assets builder
   var
   gulp = require('gulp'),
   sass = require('gulp-sass'),
   sourceMaps = require('gulp-sourcemaps'),
   prefixer = require('gulp-autoprefixer'),
   concat = require('gulp-concat'),
   uglify = require('gulp-uglify');
   
   
   // Folder paths
   var
   sassPath = 'scss/**/*.scss',
   cssPath = 'css/';
   jsPath = 'js/*.js';
   jsMinPath = 'js/';
   
   // Sass to CSS conversion
   gulp.task('styles', function() {
     gulp.src(sassPath)
         .pipe(sourceMaps.init())
         .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
         .pipe(prefixer())
         .pipe(sourceMaps.write())
         .pipe(gulp.dest(cssPath));
   });
   
   // Default
   gulp.task('default', function() {
     gulp.watch(sassPath, ['styles']);
   });
   

4. Navigate to the theme directory in your terminal.

5. Start the task runner with the command gulp. It will watch your SCSS files for changes and recompile the CSS automatically.