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:
Install the package.json file in the theme root.
Install the packages with
npm install
.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']); });
Navigate to the theme directory in your terminal.
Start the task runner with the command
gulp
. It will watch your SCSS files for changes and recompile the CSS automatically.