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
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'));
});
I have problem. I create my own gulpfile and all works fine but i wanna add a browserify to use modules, but i want to watch this. Can you be so nice and watch at my gulpfile and said if i can add somewhere in serve task to watch also browserify? Or maybe you have better solution for this problem?
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlReplace = require('gulp-html-replace');
var htmlMin = require('gulp-htmlmin');
var config = {
dist:'dist/',
src:'src/',
htmlIn:'src/*.html',
cssIn:'src/css/**/*.css',
jsIn:'src/script/**/*.js',
scssIn:'src/scss/**/*.scss',
cssOut:'dist/css',
jsOut:'dist/script',
scssOut:'src/css',
}
gulp.task('reload',function(){
browserSync.reload();
});
gulp.task('serve', ['sass','scripts'], function(){
browserSync({
server:config.src,
port:5050
});
gulp.watch([config.htmlIn, config.jsIn], ['reload']);
gulp.watch(config.scssIn, ['sass']);
})
gulp.task('sass', function(){
return gulp.src(config.scssIn)
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers:['last 3 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.stream());
})
gulp.task('mincss',function(){
return gulp.src(config.cssIn)
.pipe(cleanCSS())
.pipe(gulp.dest(config.cssOut))
})
gulp.task('minjs',function(){
return gulp.src(config.jsIn)
.pipe(uglify())
.pipe(gulp.dest(config.jsOut));
})
gulp.task('default', ['serve']);
Add another gulp watch for your browserify.
gulp.watch(config.jsIn, ['browserify']);
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']);
I'm currently want to improve my gulp file.
I want to concat the compiled scss with normalize.css in one task using stream.
Actually I'm doing it like this.
var gulp = require('gulp'),
runSequence = require('run-sequence'),
minifyCss = require('gulp-minify-css'),
sourcemap = require('gulp-sourcemaps'),
concat = require('gulp-concat'),
scss = require('gulp-ruby-sass');
var path = {
normalize: 'app/bower_components/normalize.css/normalize.css',
dir: './tmp',
scss: './app/styles/main.scss',
css: './tmp/styles'
};
gulp.task('styles', function(callback) {
runSequence('scss', 'css', callback);
});
gulp.task('scss',function() {
return scss(path.scss)
.on('error',function(err) {
console.error('Error!', err.message);
});
});
gulp.task('css', function() {
return gulp.src([path.normalize, './tmp/styles/main.css'])
.pipe(concat('main.css'))
.pipe(sourcemap.init())
.pipe(minifyCss())
.pipe(sourcemap.write())
.pipe(gulp.dest(path.css));
});
You can easily do this using the merge
package:
var merge = require('merge2');
gulp.task('styles', function() {
return merge(
gulp.src(path.normalize), // our first stream
scss(path.scss) // our second stream
) // merged at this point
.pipe(concat('main.css'))
.pipe(sourcemap.init())
.pipe(minifyCss())
.pipe(sourcemap.write())
.pipe(gulp.dest(path.css));
})
You might even be able to initialize sourcemaps for both streams, try the {sourcemap: true} option from gulp-ruby-sass
Update
I took a bigger look into your problem and found a way to include sourcemaps all the way through:
var merge = require('merge2');
var postcss = require('gulp-postcss');
var csswring = require('csswring');
gulp.task('styles', function() {
return merge(
gulp.src(path.normalize)
.pipe(sourcemaps.init()),
scss(path.scss, {sourcemap: true})
.pipe(sourcemaps.write())
)
.pipe(postcss([csswring]))
.pipe(concat('main.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.css));
});
Be aware that gulp-minify-css sometimes returns buggy sourcemaps, that's why I replaced it with gulp-postcss
Rename normalize.css to normalize.scss;
In your ./app/styles/main.scss use: #import "../../app/bower_components/normalize.css/normalize.scss";
Also see:
https://github.com/chriseppstein/sass-css-importer, which allows you:
#import "CSS:some_folder/some_css_file"
For the latest version of libSass, see: https://github.com/sass/libsass/pull/754#issuecomment-68139214
#import "file"; // load partial file.(s[ac]ss|css)
#import "file.css"; // create #import on top
#import url("file"); // create #import on top
#import url("file.css"); // create #import on top
So #import "../../app/bower_components/normalize.css/normalize" should work and import your CSS file inline.
gulp concat JS and CSS
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat= require('gulp-concat');
var minifyCss = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var pump = require('pump');
gulp.task('sass', function(){
gulp.src(['css/**/*.scss' ,'css/**/*.css' ])
.pipe(sass()) // Using gulp-sass
.pipe(minifyCss())
.pipe(concat('style_all.css'))
.pipe(gulp.dest('build/css'))
});
gulp.task('compressJS', function (cb) {
return gulp.src(['lib/*.js'])
.pipe(concat('concat.js'))
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
gulp.task('default', ['sass' , 'compressJS'] , function(){
console.log(':::default:::')
});
gulp.watch(['css/**/*.scss' ,'css/**/*.css' ], ['sass']);
gulp.watch(['lib/*.js'], ['compressJS']);