grav-theme-bones icon indicating copy to clipboard operation
grav-theme-bones copied to clipboard

How to properly setup gulp/sass

Open OvalMedia opened this issue 7 years ago • 1 comments

I am familiar with gulp, using it for all my projects (foundation 5 so far). When I try to setup bones for sass usage it looks unfinished or unprepared for sass. So I wonder where to go from here. For example: each of the sass files in the sccs folder simply include "foundation". Of course that won't work because the foundation files all reside in the bower_components folder. Compilation must fail.

This is my gulpfile in project root:

`'use strict';

var gulp = require('gulp'); var sass = require('gulp-sass'); var plumber = require('gulp-plumber'); var uglify = require('gulp-uglify');

var skinDir = './theme/';

var js_src = skinDir + 'js-src//*.js'; var js_dst = skinDir + 'js'; var scss_src = skinDir + 'scss//*.scss'; var scss_dst = skinDir + 'css';

// SASS gulp.task('sass', function () { gulp.src(scss_src) .pipe(plumber()) .pipe(sass({ sourceComments: true, //outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(gulp.dest(scss_dst)); });

// JAVASCRIPT gulp.task('scripts', function () { gulp.src(js_src) .pipe(plumber()) .pipe(uglify()) .pipe(gulp.dest(js_dst)); });

gulp.task('watch', function () { gulp.watch(scss_src, ['sass']); gulp.watch(js_src, ['scripts']); });

gulp.task('default', function () { gulp.start('watch'); });`

The "theme" folder is a softlink from project root to user/themes/bones, in case you are wondering. Am I missing something?

OvalMedia avatar Oct 22 '16 11:10 OvalMedia