I'm not sure if I understood it correctly.
Gulp creates the sass file for the required compass mixins
which I then import into my sass
This sass file is then compiled by gulp.
So far I:
Installed gulp-compass with npm
I imported the compass module which I need in my project and used the mixin in my SCSS file:
#import "/compass/css3/box-shadow";
#box-shadow-custom {
#include box-shadow(red 2px 2px 10px); }
}
Here is where I'm getting confused, so where do I have to put it? Or do I even have to add a gulp task? Because in the compass tutorial I did they just seemed to import it like a normal scss file.
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var del = require('del');
gulp.task('clean', function(){
del(['../typo3/fileadmin/assets/css/2014-12-30-ag-style.min.css'],{'force':true})
})
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('../typo3/fileadmin/assets/css/'));
});
gulp.task('minify-css', function() {
gulp.src('./css/*.css')
.pipe(minifyCSS({keepBreaks:true}))
.pipe(rename("2014-12-30-ag-style.min.css"))
.pipe(gulp.dest('../typo3/fileadmin/assets/css/'));
});
// Watch Files For Changes
gulp.task('watch', function() {
gulp.watch('./scss/*.scss', ['clean','sass']);
gulp.watch('./css/*.css', ['minify-css']);
});
// Default Task
gulp.task('default', ['clean','sass','minify-css','watch']);
Or do I install just the compass package with npm? But there is no box-shadow.scss.
Related
I'm using the _s (underscores) starter WordPress theme and trying to use my own gulp script to do the following:
compile sass files from ./sass/ (there are many scss files that are all added as 'imports' into ./sass/style.scss)
autoprefix my CSS
create a sourcemap file
compile/autoprefix/sourcemapped files should reside in the root of the theme (./) named style.css and style.css.map
I have it working with no errors - where it does generate my style.css and style.css.map - but it just doesn't add browser prefixes. It's like the autoprefixer plugin isn't working.
How do I get autoprefixer to prefix my css? I tested it by adding transition: all .5s, display: grid, and they don't get prefixed.
There is no error either, so I'm at a loss.
Here is my gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
// Compile Sass
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./'))
// Autoprefix
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'))
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
gulp.task('default', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
Here is what I have:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','cleanCSS','minify-css']);
My problem:
When I initially run gulp it works perfectly. As I save my files, the only function that executes is sass, but my site files link to the minified CSS so I need each function to work otherwise I don't see my changes. This issue started once I added the task minify-css.
V2 Update
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', ['cleanCSS'], function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','minify-css']);
As far as I can tell you have three options.
Option 1 - least preferred but least amount of changes
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass', 'cleanCSS', 'minify-css']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch','cleanCSS','minify-css']);
While your default task is running all four tasks(sass, watch, cleanCSS and minify-css), when the watch task notices changes in one of your .sass files, it only reruns the sass task(not the default task which would run all four again). This is not preferred as I believe gulp runs these tasks in parallel and they aren't guaranteed to run in order or wait for one to finish before the next run.
Option 2 - better, but still not optimal
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['minify-css']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('assets/css/'));
});
gulp.task('cleanCSS', ['sass'], function(){
return gulp.src('assets/*.css')
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('minify-css', ['cleanCSS'], function() {
return gulp.src('assets/css/style.css')
.pipe(cleanCSS())
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch',]);
This is much more declarative. Now running gulp will execute the default task which will fire off the sass and watch tasks. minify-css is dependent on cleanCSS, so gulp will try to run the cleanCSS task, but that is dependent on sass, so it will run that first, then cleanCSS, then minify-css. When watch notices a change it will rerun minify-css, but will see the dependency chain and run all of them again.
Option 3 - best
gulp is different from grunt in that it uses streams so that it doesn't have to write to disk in between each task. Keeping the files in memory while manipulating them makes it operate faster. If all of these tasks need to run all of time, the best would be to combine them into one with something like the following.
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
// GULP WATCH
gulp.task('watch', function() {
gulp.watch('assets/sass/*.sass', ['sass']);
});
// GULP SASS CONVERTER
gulp.task('sass', function(){
return gulp.src('assets/sass/style.sass')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(cleanCSS())
.pipe(concat('style.css'))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('default', ['sass','watch']);
This will read the files in once and write them once. The default task will execute the sass task as will the watch task when it notices changes.
Hope this helps!
I want to have a watch task that reloads the browser. Below watch works fine for sass compilation but the browser doesn't reload - thoughts?
// Gulp Packages
var gulp = require('gulp'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload;
// Default Task
gulp.task('default', ['copyFiles','styles']);
// Copy Files
gulp.task('copyFiles', function() {
gulp.src('./source/*.php').pipe(gulp.dest('./public'));
});
// Compile SASS
var sassOptions = {
errLogToConsole: true,
outputStyle: 'compressed'
};
gulp.task('styles', function() {
gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./css/'));
});
// Watch Task
gulp.task('watch', function() {
gulp.watch('./scss/includes/**/*.scss', ['styles']);
gulp.watch('./scss/includes/**/*.scss').on('change', browserSync.reload);
});
I would suggest a configuration similar to:
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
Source: https://www.browsersync.io/docs/gulp
You need to initialise a Server and watch changes to your SASS and HTML. Then in your sass compile task you need to add .pipe(browserSync.stream()); after the dest command so browserSync can pick up your newly compiled SASS and serve it.
Finally you need to call your serve task with your default task.
Also you can take a look here https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development#using-browsersync-and-sass for another example of Browsersync + Gulp + 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 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']);