Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[gulp-sass] no mixin named red
// Helpers
@import 'helpers/variables';
@import 'helpers/mixins';
.button {
@include red;
}
# src/base/scss/
- base.scss
- helpers/
- mixins.scss
- variables.scss
# src/components/button/
- button.scss
'use strict';
var gulp = require('gulp');
var assemble = require('fabricator-assemble');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var concat = require('gulp-concat');
var csso = require('gulp-csso');
var del = require('del');
var gutil = require('gulp-util');
var imagemin = require('gulp-imagemin');
var jscs = require('gulp-jscs');
var jshint = require('gulp-jshint');
var order = require('gulp-order');
var plumber = require('gulp-plumber');
var pxtorem = require('gulp-pxtorem');
var reload = browserSync.reload;
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var symlink = require('gulp-sym');
// File-type globs
var globFabricatorScss = [
'./src/fabricator/scss/fabricator.scss'
];
var globFabricatorJs = [
'./src/fabricator/js/*.js'
];
var globScss = [
'./src/base/scss/base.scss',
'./src/components/**/*.scss'
];
var globJs = [
'./src/base/js/**/*.js',
'./src/components/**/*.js'
];
var globImg = [
'src/base/img/**/*'
];
// Fabricator assemble
gulp.task('assemble', function(done) {
assemble({
keys: {
materials: 'components'
},
layout: 'default',
layouts: 'src/layouts/*',
layoutIncludes: 'src/layouts/includes/*',
views: 'src/views/**/*',
materials: 'src/components/**/*.html',
data: 'src/data/**/*.json',
docs: 'docs/**/*.md',
dest: 'dist'
});
done();
});
// Remove /dist for a clean build
gulp.task('clean', function(cb) {
del('dist', cb);
});
// Install git hooks...
// Pre-commit hook (`$ gulp js`)
gulp.task('hooks', function() {
return gulp.src(['.git-hooks/pre-commit'])
.pipe(symlink(['.git/hooks/pre-commit'], {
relative: true,
force: true
}));
});
// Styles (Fabricator)
gulp.task('styles:fabricator', function() {
return gulp.src(globFabricatorScss)
.pipe(sass({
errLogToConsole: true
}))
.pipe(autoprefixer('last 1 version'))
.pipe(csso())
.pipe(concat('fabricator.css'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(reload({
stream: true
}));
});
// Styles (Global)
gulp.task('styles:global', function() {
return gulp.src(globScss)
// .pipe(order([
// 'src/base/scss/base.scss',
// 'src/base/scss/**/*.scss',
// 'src/components/**/*.scss'
// ]))
.pipe(sass({
errLogToConsole: true
}))
.pipe(autoprefixer({
browsers: 'last 1 version'
}))
.pipe(pxtorem({
replace: false
}))
//.pipe(csso())
.pipe(concat('global.css'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(reload({
stream: true
}));
});
gulp.task('styles', ['styles:fabricator', 'styles:global']);
// Scripts (Fabricator)
gulp.task('scripts:fabricator', function() {
return gulp.src(globFabricatorJs)
.pipe(concat('fabricator.js'))
.pipe(gulp.dest('dist/assets/js'));
});
// Scripts (Global)
gulp.task('scripts:global', function() {
return gulp.src(globJs)
.pipe(plumber())
// .pipe(jscs())
// .pipe(jshint())
// .pipe(jshint.reporter('jshint-stylish'))
.pipe(concat('global.js'))
.pipe(gulp.dest('dist/assets/js'))
.on('error', function() {
gutil.log('Invalid JS');
});
});
gulp.task('scripts', ['scripts:fabricator', 'scripts:global']);
// Images
gulp.task('images', function() {
return gulp.src(globImg)
.pipe(imagemin())
.pipe(gulp.dest('dist/assets/img'));
});
// Server
gulp.task('serve', function() {
browserSync({
server: {
baseDir: 'dist'
},
notify: false,
logPrefix: 'FABRICATOR'
});
gulp.task('assemble:watch', ['assemble'], reload);
gulp.watch('src/**/*.{html,md,json}', ['assemble:watch']);
gulp.task('styles:fabricator:watch', ['styles:fabricator'], reload);
gulp.watch(globFabricatorScss, ['styles:fabricator:watch']);
gulp.task('scripts:fabricator:watch', ['scripts:fabricator'], reload);
gulp.watch(globFabricatorJs, ['scripts:fabricator:watch']);
gulp.task('styles:global:watch', ['styles:global'], reload);
gulp.watch(globScss, ['styles:global:watch']);
gulp.task('scripts:global:watch', ['scripts:global'], reload);
gulp.watch(globJs, ['scripts:global:watch']);
gulp.task('images:watch', ['images'], reload);
gulp.watch(globImg, ['images:watch']);
});
// Default build task
gulp.task('default', ['clean'], function() {
// Define build tasks
var tasks = [
'styles',
'scripts',
'images',
'assemble'
];
// Run build
runSequence(tasks, function() {
gulp.start('serve');
});
});
/* Mixins */
@mixin red {
color: red;
outline: 10px solid red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment