I work with gulp sass to compile, prefix and minify my scss to css and min.css, I use watch to fire compiling each time I save files but suddenly gulp-sass stopped writing the output files ONLY when saving partials, everything works fine when I save the main style.scss
This is the SASS log in my terminal on both cases, wether saving main file or partial scss files. As you can see it fires both times but only on the main files saving the output is generated and saved.
[11:54:50] Starting 'sass'...
[11:54:51] Finished 'sass' after 886 ms
[11:54:52] Starting 'sass'...
[11:54:53] Finished 'sass' after 809 ms
Gulp is installed globally and the Gulpfile.js below always worked until yesterday.
I tried to change the gulp.src path several times but without luck.
Obviously I still can compile everything saving the main style.scss but is really annoying when you work on several file simultaneously.
Another strange thing is that trying to change files path to compile the minified version wa reverted to an older date version; I thought it could be an NPM cache problem but I'm not really confident with node/npm, I use it just to compile SCSS and concatenate JS and that's it.
Thanks a lot in advance to anyone who could help me.
var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
gulp.task('scripts', function() {
gulp.src('_js/*.js')
.pipe(concat('scripts.js'))
.pipe(gulp.dest('assets/js'));
return gulp.src(themeurl + 'assets/js/scripts.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest(themeurl+'assets/js/'));
});
gulp.task('watch', function () {
gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );
});
Have you solved your problem? I have the same issue.
My workaround is related how I write watch task. And I have to delete css bundle before every new compilation
// old
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));
The result is content of the CSS bundle is updated every compilation but date/time of the bundle remains the same.
Does it work when you replace the style with an * as shown in the code block below? The * tells gulp to search for all files ending with .scss in the folder.
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
Thank you Remco , I tried already but unfortunately nothing changed.
As i described upon in the update the problem seems to be related to file's date/time and not on the compiling: the compiling is updated with all my modifications but the date/time is not.
Faced similar issue, gulp tasks were running error free but producing no results for only my styles and image assets (and I didn't add or remove any dependencies, change anything (configuration) or so).
In my case I was using | in src() to read multiple files such as src('src/styles/**/*.{sass|scss}') and src('src/images/*.{png|jpg|svg}') so it turned to be that this was causing my file to be ignored.
Changing | to , solved the issue for me
src('src/styles/**/*.{sass,scss}')
src('src/images/*.{png,jpg,svg}')
Related
I'm wondering if there is a workaround to :
Use Liquid in .scss files
Then compile all .scss files to .css
Right now, i'm using a custom theme starter that's using gulp to compile my .scss files to a unique theme.css file. I'd like to use liquid in my .scss files and then still compile all of this to .css.
For now, i can't add .scss.liquid to my files because if i do that, then the compiler freaks out as it obviously doesn't recognize .liquid extensions. I've found an article talking about how to compile files to .scss.liquid but that's not what i want since Shopify won't use Scss in the future. I'd like to compile directly to .css.
Here is what my current task looks like for my sass files :
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
sass.compiler = require('node-sass')
const styles = () => src('src/styles/theme.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(rename('theme.css'))
.pipe(dest('dist/assets/'));
module.exports = styles;
There is an article that covers this issue here:
https://ablesense.com/blogs/news/using-gulp-to-compile-sass-liquid-tags
Effectively the solution to compiling liquid tags in SASS is to use the native feature in SASS that allows you to escape out strings #{' your escaped {{ liquid tags }} here '} which will allow linting & transpiling to CSS and then using PostCSS to reformat the output into clean liquid tags.
An arguably better option is to skip the issue entirely and use CSS variables in your SASS while adding your liquid variables into :root in the <head> of the layout.liquid
Your SASS:
btn.primary {
background-color: var(--color-btn-primary);
}
In the <head> of your liquid.layout:
{% style %}
:root {
--color-btn-primary: {{ settings.color_button }}
}
{% endstyle %}
This is covered in detail here:
https://www.shopify.com.au/partners/blog/deprecating-sass
This is pretty weird. I have this output:
converting sass to css...
[18:36:00] gulp-debug: src/app/app.component.scss
[18:36:00] gulp-debug: src/app/pages/about/about.component.scss
[18:36:00] gulp-debug: src/app/pages/contact/contact.component.scss
[18:36:00] gulp-debug: src/app/pages/home/home.component.scss
[18:36:00] gulp-debug: src/app/pages/home/components/control-panel/control-panel.component.scss
[18:36:00] gulp-debug: 5 items
notify clients of css change
change /Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/app/app.component.css
change /Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/app/pages/home/home.component.css
change /Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/app/pages/home/components/control-panel/control-panel.component.css
change /Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/app/pages/about/about.component.css
change /Users/alexamil/WebstormProjects/oresoftware/sumanjs/suman-chrome-extension/app/pages/contact/contact.component.css
here is my code:
const gulp = require('gulp');
const gdebug = require('gulp-debug');
const sass = require('gulp-sass');
console.log('converting sass to css...');
gulp.src(path.resolve(root + '/src/**/**/*.scss'))
.pipe(gdebug())
.pipe(sass())
.pipe(gulp.dest('.'))
.once('finish', function () {
console.log('notify clients of css change');
notifyClients();
});
From the logs it looks like the files are being written out, but from my editor, there don't appear to be any new .css files in the filesystem, only .scss files. Anyone know what might be wrong?
Simply in case of dynamic src and you want respective same dest (as received in src) then you can use following
Example Suppose we have array of scss file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var scssArr = [
'src/asdf/test2.scss',
'src/qwerty/test1.scss'
];
function runSASS(cb) {
scssArr.forEach(function(p){
gulp.src(p, {base:'.'})
.pipe(sass({outputStyle: 'compressed'}))//outputStyle is optional or simply sass()
.pipe(gulp.dest('.')); //if othe folder including src path then use '/folder-name' instead of '.', so output path '/folder-name/{src-received-path}'
})
cb();
}
exports.runSASS = runSASS; // gulp runSASS
Run command gulp runSASS This will create following files:
src/asdf/test2.css
src/qwerty/test1.css
Happy Coding..
Is there any option available in gulp-sass to combine sass files?
For example:
main.scss:
$var: red;
control.scss:
#import 'main';
.a{
color: $var;
}
The combined output file should be single scss file like below
$var: red;
.a{
color: $var;
}
Did you try something like this?
gulp = require('gulp');
concat = require('gulp-concat');
// the default task
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(concat('all.scss'))
.pipe(gulp.dest('./dist/'));
});
This should produce a single combined scss in ./dist/all.scss.
I don't know if #import statements are handled correctly, but these
issues are usually handled by ad-hoc modules (for example, gulp-sass), which produce a .css output...
Here is solution, full proof solution. You need to use gulp-scss-combine as well.
(function(r){
const gulp = r('gulp');
const combine = r('gulp-scss-combine');
const concat = r('gulp-concat');
gulp.task('combine-scss', ()=>gulp.src('scss/**') // define a source files
.pipe(combine()) // combine them based on #import and save it to stream
.pipe(concat('style.scss')) // concat the stream output in single file
.pipe(gulp.dest('css')) // save file to destination.
);
})(require);
You can play with code here . code , basically doing same thing but not in gulp but a node.js standard application. just delete all.scss file or its content, then run the program. you will see the result.
You have to execute one file that imports all other scss files, but when you listen the changes, you have to listen the changes of all files in the scss directory.
gulp.task('sass', function() {
// You have to execute one file that import all other scss files
return gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('build/css'));
});
gulp.task('watch', function() {
// You have to listen the all files in the scss directory
gulp.watch('src/scss/**/*.scss',['sass']);
});
Running protractor, I want to call for a screenshot as part of my spec.
I don't want to take a screenshot every test, and these "reporters" are taking them at every test, every failed test, or once per spec.
This is all very meta, but more importantly I just want a picture to take, and save on a Bamboo CI server.
Where do I start?
I made an npm module for this https://www.npmjs.com/package/screenshot-protractor
Add the module to your project with:
npm install screenshot-protractor --save
In your conf.js file locate or create your onPrepare function.
onPrepare: function() {
}
inside your onPrepare, add this line:
global.screenshot = require('screenshot-protractor').saveScreenshot;
then in the spec.js file, add
screenshot('path/to/screenshots.png');
Use takeScreenshot() and fs module:
var fs = require('fs');
browser.takeScreenshot().then(function (data) {
var stream = fs.createWriteStream('test-results/test.png');
stream.write(new Buffer(data, 'base64'));
stream.end();
});
I am new to using gulp-sass and sass\scss structure in general, so bear with me!
I have a scss file in which I want to import some partials.
I have a styles folder in which lives my main scss file and a partials sub folder which contains a couple of files I wish to import in.
So at the top of my main.scss I have the typical:
#import 'partials/main_menu';
#import 'partials/main_usermenu';
Here are the relevant pieces of my gulp file:
var paths = {
scss_files:'./src/assets/styles/**/*.scss'
}
gulp.task('compile_sass', function () {
return gulp.src(paths.scss_files, {base:'src'})
.pipe(gulp.dest(paths.dist))
.on('error', gutil.log)
.pipe(sass({outputStyle: 'compressed'})
.on('error', sass.logError))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.dist))
});
When my gulp task runs, I get an error saying my main_menu partial was not found or unreadable and hence it fails to import.
Am I missing something in my task, e.g. is there some gulp-sass option I should be using or should it just work?
Thanks
After viewing this related question I was able to solve a similar problem I was having.
I believe if you add the 'includePath' option to the sass() function call that contains the parent path to your partials directory the error will go away.
i.e. something like
.pipe(sass({includePath: ['parent/PathTo/Partials'], outputStyle: 'compressed'})