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?
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?