I'm beginner with Foundation and Sass. I understand slowly how it works. The workflow seems great, but here's my "issue".
When my SCSS is compiled, my CSS minifies as soon as I save my .scss file.
I've tried to turn off the Gulp task, but it didn't do anything.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src'
];
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe($.sass({
includePaths: sassPaths,
// outputStyle: 'compressed'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
Any ideas?
From looking at your task their shouldn't be any part of it that is minifying your css. A couple of things you could try:
1) Try outputStyle: 'expanded'
2) Try compiling your sass without including any of the bower sass files, as one of them could already be minified (although unlikely). Or even just check those manually.
3) Or finally try this configuration:
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src',
'scss/*.scss'
];
gulp.task('sass', function() {
return gulp.src(sassPaths)
.pipe($.sass({
outputStyle: 'expanded'
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('css'));
});
gulp.task('default', ['sass'], function() {
gulp.watch(['scss/**/*.scss'], ['sass']);
});
Related
I am having issues trying to get LiveReload working with Gulp Connect plugin.
Below is my gulpfile.js
I have my html files in same directory as gulpfile.js and all sass files are imported into /sass/styles.scss from same folder (smacss) and other partial files in /sass/modules/*.scss
Help appreciated
var gulp = require('gulp');
var sass = require('gulp-sass');
var connect = require('gulp-connect');
gulp.task('connect', function(){
connect.server({
root: '.',
livereload: true
});
});
// keeps gulp from crashing for scss errors
gulp.task('sass', function () {
return gulp.src('./sass/*.scss')
.pipe(sass({ errLogToConsole: true }))
.pipe(gulp.dest('./css'));
});
gulp.task('livereload', function (){
gulp.src('.')
.pipe(connect.reload());
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
gulp.watch('.', ['livereload']);
});
gulp.task('default', ['connect', 'watch', 'sass']);
Not sure if your root path is working here. Can you try root: './' or just root: '/' maybe ?
And the gulp.watch and gulp.src might need files path instead of directory path. Can you try gulp.src('./*') and gulp.watch('./*') maybe ?
This ended up working for me:
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
// POST CSS
var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var connect = require('gulp-connect');
gulp.task('myStyles', function () {
var processors = [
cssnext()
];
gulp.src('sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write('.', {
includeContent: false,
sourceRoot: '../sass'
}))
.pipe(gulp.dest('css'))
.pipe(connect.reload());
});
gulp.task('connect', function() {
connect.server({
livereload: true
});
});
gulp.task('watchMyStyles', function() {
gulp.watch('sass/*.scss', ['myStyles']);
});
gulp.task('default', ['watchMyStyles', 'connect']);
gulp.task('server', [ 'connect']);
I'm trying to make Gulp compile my sass files. It sees changes in main.sass file but if I #import files it doesn't see changes in them unless I restart gulp.
Here is my gulpfile
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync').create(),
jade = require('gulp-jade');
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir:'./'
}
});
});
// Compiling SASS to CSS
gulp.task('styles', function () {
return sass('assets/sass/main.sass')
.on('error', sass.logError)
.pipe(autoprefixer({
browsers: ['last 3 versions','> 5%'],
cascade: false
}))
.pipe(gulp.dest('assets/css/'))
.pipe(browserSync.stream());
});
//HTML
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./*.jade')
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest('./'))
});
//Default task
gulp.task('default', ['styles', 'watch', 'browser-sync', 'templates']);
gulp.task('watch', function(){
gulp.watch('*.html').on('change', browserSync.reload);
gulp.watch('*.jade').on('change', browserSync.reload);
gulp.watch('*.css').on('change', browserSync.reload);
gulp.watch('assets/sass/main.sass', ['styles']);
gulp.watch('*.jade', ['templates']);
})
And these is the structure of my project
You're only watching for changes to assets/sass/main.sass. You need to watch for changes to any .sass file below assets/sass:
gulp.watch('assets/sass/**/*.sass', ['styles']);
Instead of:
gulp.watch('assets/sass/main.sass', ['styles']);
See below. The problem I'm having with my current code is that Sourcemaps aren't getting injected via Browsersync. Am I missing something here or doing it the wrong way?
For reference:
https://www.browsersync.io/docs/gulp/#gulp-sass-maps
// requirements
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function() {
return sass('assets/scss/style.scss', {sourcemap: true, style: 'compact'})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(rename({suffix: '.min'}))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({match: '**/*.css'}))
});
gulp.task('serve', ['sass'], function() {
browserSync.init({
proxy: "localhost/portfolio2014",
open:false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "site/**/*", "content/**/*", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve'] );
Do you have to use gulp-ruby-sass? The gulpfile.js below is adding sourcemaps with gulp-sass and updating the browser when saving .scss files with sourcemaps.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var prefix = require('gulp-autoprefixer');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var cssclean = require('gulp-clean-css');
// create sass tasks
gulp.task('sass', function () {
return gulp.src('assets/scss/test.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(rename({ suffix: '.min' }))
.pipe(cssclean())
.pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
.pipe(sourcemaps.write(''))
.pipe(gulp.dest('assets/styles'))
.pipe(browserSync.stream({ match: '**/*.css' }))
.on('error', function (err) {
console.error('Error!', err.message);
});
});
gulp.task('serve', ['sass'], function () {
browserSync.init({
proxy: "localhost/portfolio2014",
open: false
});
gulp.watch("assets/scss/**/*.scss", ['sass']);
gulp.watch(["assets/styles/*.css", "assets/javascript/*.js"]).on('change', browserSync.reload);
});
// default task (just run gulp)
gulp.task('default', ['serve']);
I'm trying to escape liquid syntax with interpolate (#{' '}) but i'm getting this error:
[22:07:05] Starting 'scss'...
[22:07:05] Finished 'scss' after 9.77 ms
[22:07:05] [gulp-sass] stylesheets/main.css
527:10 Invalid CSS after " color: {": expected "}", was "ttings.color-te..."
When i remove all the liquid syntax from the code, the task runs perfectly. This is the scss task:
var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var cssnano = require('gulp-cssnano');
var rename = require("gulp-rename");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('scss', function() {
gulp.src('stylesheets/*.scss')
.pipe(sass({ includePaths : ['./stylesheets/**/*.scss'] }))
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(rename({ suffix: '.min.css', extname: '.liquid' }))
.pipe(gulp.dest('./assets'));
});
gulp.task('watch', function() {
gulp.watch('stylesheets/**/*.scss', ['scss']);
});
If i remove this part >
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(cssnano())
the task runs fine, but with problems to upload to shopify (Error invalid upload request! ) ... I`m using shopify-upload in another task too.
Remove 'autoprefixer' and/or 'cssnano'
You can't use gulp-saas to extrapolate liquid syntax, it will only parse sass files.
If you want to parse liquid files, you can use gulp-liquify before compiling you sass files.
I'm setup as outlined below. The good news: styles are being compiled, the bad news: gulp doesn't seem to watch the scss files for a change and compile automatically?
// Include gulp
var gulp = require('gulp');
// Plugins
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var include = require('gulp-include');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('default', ['watch'], function() {
gulp.watch('./_themes/blanktheme/ui/scss/*.scss', ['styles']);
});
gulp.task('default', ['styles', 'watch']);
I think this come from the fact you have two tasks default. I guess gulp ignore the first one (with gulp.watch) to only trigger the second one. Then you have dependencies with watch but seems like watch does not exist ?
You can install gulp-watch locally, and include it in your file. Give a look at gulp-watch documentation it might help.
Try this :D
var watch = require('gulp-watch');
// Styles
gulp.task('styles', function() {
gulp.src('./_themes/blanktheme/ui/scss/styles.scss')
.pipe(include())
.pipe(sass({
errLogToConsole: true
}))
.pipe(minifycss())
.pipe(gulp.dest('./_themes/blanktheme/ui/css/'))
});
// Watch
gulp.task('watch', function() {
watch('./_themes/blanktheme/ui/scss/*.scss', function () {
gulp.start('styles');
});
});
gulp.task('default', ['styles', 'watch']);