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.
Related
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']);
});
Source link - I don't know what is missing here
Everything fine if I am not including json file
1) gulpfile.js
var jsonSass = require('gulp-json-sass'),
gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-ruby-sass');
gulp.task('sass', function() {
return gulp
.src(['sass/example.json', 'sass/example.scss'])
.pipe(jsonSass({
sass: true
}))
.pipe(concat('output.scss'))
.pipe(sass())
.pipe(gulp.dest('out/'));
});
gulp.task('default', ['sass']);
2) example.json
{
"color": "blue"
}
3) example.scss file
.test{
color:$color;
}
4) error message
1. You want to output SCSS, not SASS. That means your sass option for gulp-json-sass is wrong. From the docs:
If truthy, output valid sass variables. If false, output scss variables.
2. You can't use gulp-ruby-sass in a pipe. From the docs:
Use gulp-ruby-sass instead of gulp.src to compile Sass files.
That means .pipe(sass()) won't work. You have to use gulp-sass instead of gulp-ruby-sass.
var jsonSass = require('gulp-json-sass'),
gulp = require('gulp'),
concat = require('gulp-concat'),
sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src(['sass/example.json', 'sass/example.scss'])
.pipe(jsonSass({
sass: false
}))
.pipe(concat('output.scss'))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('out/'));
});
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']);
I created a Gulp task, styles, that creates minified and non-minified CSS files from Sass files. I would like to also create minified and non-minified Sourcemaps, however, this doesn't appear to be working.
Here is the code:
// Compile Sass, Autoprefix and minify
gulp.task('styles', function() {
return gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./assets/css/')) // Create sourcemap
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('../maps')) // Create minified sourcemap
.pipe(gulp.dest('./assets/css/'))
});
Currently, this throws an error and doesn't create the minified sourcemap. However, if I remove one of the sourcemap.write instances, then it works completely fine.
Is it possible to create two sourcemaps in one stream?
How about implementing something like this?
https://github.com/ben-eb/gulp-cssnano/issues/21
Edit: My attempt from the above link.. I got this to run without any errors.
// Grab our gulp packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
cssnano = require('gulp-cssnano'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'),
stylish = require('jshint-stylish'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
plumber = require('gulp-plumber'),
bower = require('gulp-bower'),
merge = require('merge-stream'),
clone = require('gulp-clone'),
browserSync = require('browser-sync').create(),
clip = require('gulp-clip-empty-files');
gulp.task('styles', function() {
var source = gulp.src('./assets/scss/**/*.scss')
.pipe(plumber(function(error) {
gutil.log(gutil.colors.red(error.message));
this.emit('end');
}))
.pipe(sass())
.pipe(sourcemaps.init()) // Start Sourcemaps
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}));
var pipe1 = source.pipe(clone())
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('./assets/css/')); // Create sourcemap
var pipe2 = source.pipe(clone())
.pipe(rename({suffix: '.min'}))
.pipe(cssnano())
.pipe(sourcemaps.write('../maps')) // Create minified sourcemap
.pipe(clip())
.pipe(gulp.dest('./assets/css/'));
return merge(pipe1, pipe2);
});
If like cimmanon was suggesting that you may not want to have a minified source map, just delete the
.pipe(sourcemaps.write('../maps')) // Create minified sourcemap
from
var pipe2
I'm having a strange problem with Gulp. Here is my Gulp file:
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('default', function() {
gulp.run('main');
gulp.watch('sass/*.scss', function() {
gulp.run('main');
})
});
gulp.task('main', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
// .pipe(autoprefixer('last 10 version'))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}))
;
});
The script runs correctly the first time. But on second and subsequent runs of the same script (without Gulp having stopped running), it puts it in the SASS directory as a subitem of the .SCSS file. Any idea why this is happening. I'm not sure how to even debug.
Try the following code.
It uses the correct syntax for gulp, replacing gulp.run() with the supported function arguments.
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
gulp.task('main', function() {
return gulp.src('./sass/**/*.scss')
.pipe(sass())
.on('error', notify.onError(function(error) { return 'Error: ' + error.message; }))
.pipe(gulp.dest('./css'))
.pipe(notify({ message: 'Your SASS has been auto-prefixed and minified.'}));
});
gulp.watch('sass/*.scss', ['main']);
gulp.task('default', ['main']);
Found the answer, the gulp.dest keeps the folder structure of gulp.src, to override you can set the base property of the src, this will exclude whatever folder the base is set to
example gulp.src('./sass/' + '**/*.scss', {base: 'sass'}) this now excludes sass from the destination, no longer appending sass to your gulp.dest
See and this look at gulp.src