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'));
});
Related
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 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 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.