Gulp sass not compiling properly - gulp

So whats happening is when I edit a scss file and save, gulp task runs with no errors but excludes that files content in my main default.css.
I switch to another scss file, edit that and THAT one is now exluded but the previous gets compiled.
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('scss', function () {
return gulp.src('assets/resources/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('assets/css/'));
});
gulp.task('watch', function () {
gulp.watch('assets/resources/**/*.scss', ['scss']);
});
gulp.task('default', ['scss', 'watch']);
No idea whats going on and not even sure if this is the right place to post this but im at my wits end.
Should also note that doing a normal sass watch from the command line works fine, no issues there.
Gulp 3.9.1
Gulp-sass 4.0.1
Node-sass 4.9.0
File structure if it helps
assets/css/default.css
assets/resources/default.scss
assets/resources/base/<scss files>
assets/resources/modules/<scss files>

So the problem was with gulp-sass.
Uninstalled it then installed gulp-ruby-sass, tweaked task based on the help file and it's working perfectly now

Related

Gulp is not creating new directories

I'm new to gulp, and I have a very basic question.
I've used the code snippet below to copy an "html" file to another directory.
gulp.task('copy-html', (done) => {
return gulp.src('./index.html')
.pipe(gulp.dest('dist'));
})
Then in the command line I wrote and executed gulp copy-html
I was expecting to see a dist folder with index.html in it.
but what happens is that nothing happens. The Task completes but no changes occur.
Node version: 9.3.0
npm version : 5.5.1
gulp versions:
CLI version 2.0.1
Local version 4.0.0
Thanks in advance.
This what worked for me. I just moved the solution directory to the hard disk partition where the os is installed and it worked like a charm

Running PostCSS compiled style sheets through purifycss with Gulp

I have a task that first runs CSS files through postcss plugins and then through purifycss like this:
.pipe(postcss(processors))
.pipe(purify(['src/test/html/*.html']))
.pipe(gulp.dest(PLI.target.test.css));
However the CSS is not being purified. Anyone know why?
The actual task that is running the build can be found here: superfly-css-task-build
If you clone this project and run npm i && npm run test and then look in the target/test/css/index.css all the un used CSS is still contained in the file even though src/test/html/index.html is used as the purifycss filter.

No gulp file found (windows)

have a problem with gulp. I've been using gulp for 3 months. And for the first time a have an issue like this:
When I try to run gulp, command line shows: no gulp file found. I use node, and I got project from my friend to fix code. Thank, U!
gulp is telling you that it doesn't have a gulpfile with instructions for it to follow. Please make sure you were in correct directory that contains gulpfile.js. It will be better if you could show your project structure here.

gulp watch: no gulpfile found

I am trying to run the Aurelia skeleton-es2016-asp.net5 demo.
I am following the steps in read me.
I opened a command box and ran
npm install gulp
which seemed to work
however ehrn I now run
gulp watch
I get an error
No gulpfile found
Have you created gulpfile.js containing the gulp tasks ?
If No, you need to add gulpfile.js to your directory root and may write some default task in it for testing,
var gulp = require('gulp');
gulp.task('default', function () { console.log('Hello Gulp!') });
If yes, Try Installing gulp globally npm install -g gulp

Gulp watch and sass working but not working

I've been toiling with this for a number of hours now and figured I best get some help as I'm going in circles.
I'm relatively new to using Gulp but quite excited to be doing so. I have a very simple gulpfile.js setup as below:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
console.log("ran something");
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
This all executes just fine. However, my scss files only get compliled when I first execute gulp. The watch recognises all changes when I make them but no further compiles are made. It's almost like the file gets locked or cached or something strange after it is first initiated.
Here is cli output:
[15:04:04] Starting 'watch'...
[15:04:04] Finished 'watch' after 11 ms
[15:04:12] Starting 'sass'...
ran something
[15:04:12] Finished 'sass' after 8.17 ms
I'm running Windows 10 64bit and fresh install of gulp and dependencies as of today.
My primary editor is PhpStorm in which I've setup a configuration to run the gulp file. However, I've also tried in a basic text editor as well as running gulp directly from the node command prompt.
Any ideas?
Appears as though the issue wasn't an issue with gulp or any of the setup above. I noticed if I watched the files outside of all my editors that they were indeed being updated via gulp and it was just my editors that weren't responding until I stopped the gulp watch.
I trialled the latest version of PhpStorm 10 and it worked perfectly first time even though nothing else has changed. Must simply be a bug in version 8 seeming Gulp didn't exist back then.