Skip to content

Instantly share code, notes, and snippets.

@dani-z
Last active August 25, 2017 10:09
Show Gist options
  • Save dani-z/2784eb4d12ccb061aeb6 to your computer and use it in GitHub Desktop.
Save dani-z/2784eb4d12ccb061aeb6 to your computer and use it in GitHub Desktop.
Foundation 5 with SASS 3.4 using GULP (no libsass)
{
"name": "Project name",
"version": "0.0.1",
"authors": [
"Anonymous"
],
"description": "Project description",
"dependencies": {
"foundation": "~5.4.4"
}
}
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
uglify = require('gulp-uglify'),
stripDebug = require('gulp-strip-debug'),
cssmin = require('gulp-cssmin');
// Gulp plumber error handler
var onError = function(err) {
console.log(err);
}
// Lets us type "gulp" on the command line and run all of our tasks
gulp.task('default', ['jshint', 'scripts', 'styles', 'watch']);
gulp.task('styles', function () {
return gulp.src('./src/scss/app.scss')
.pipe(sass({
sourcemap: true,
precision: 10,
loadPath: [
process.cwd() + '/bower_components/foundation/scss' // This is the magic row
]
}))
// .pipe(sass({
// style: 'compressed',
// quiet: true,
// trace: true
// }))
// .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
.on('error', function (err) { console.log(err.message); })
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
.pipe(notify({ message: 'CSS task complete' }));
});
// Hint all of our custom developed Javascript to make sure things are clean
gulp.task('jshint', function() {
return gulp.src('./src/scripts/*.js')
.pipe(plumber({
errorHandler: onError
}))
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(notify({ message: 'JS Hinting task complete' }));
});
gulp.task('scripts', function() {
return gulp.src('./src/js/*.js')
.pipe(plumber({
errorHandler: onError
}))
.pipe(concat('app.min.js'))
// .pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'))
.pipe(notify({ message: 'Scripts task complete' }));
});
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/scss/**/*.scss', ['styles']);
// Watch JS
gulp.watch('./src/js/**/*.js', ['jshint', 'scripts']);
});
{
"name": "Project name",
"description": "Project description",
"version": "0.0.1",
"devDependencies": {
"gulp": "^3.8.8",
"gulp-concat": "^2.4.1",
"gulp-cssmin": "^0.1.6",
"gulp-jshint": "^1.8.4",
"gulp-notify": "^1.6.0",
"gulp-plumber": "^0.6.5",
"gulp-ruby-sass": "^0.7.1",
"gulp-strip-debug": "^1.0.1",
"gulp-uglify": "^1.0.1"
},
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"gulp-sass": "^0.7.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment