A little help with gulp please

1

Hi,

I am having a go at SASS and so far I’ve got it to compile a single SCSS file manually using node-sass scss/styles.scss css/styles.css

So now I’m trying to do compile it automatically and lifted the following code off the vs code website, and edited it for my folder paths. The problem I’m having is that I want to change the destination but I don’t know how.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function(f) {
          return f.base;
       }))
});

gulp.task('default', ['sass'], function() {
    gulp.watch('scss/*.scss', ['sass']);
})

This is the error I get so i’m pretty sure that it is seeing inside the scss folder at least.

longError 
[18:18:38] Using gulpfile c:\Users\markj\Desktop\sass-playlist-master\gulpfile.js
        [18:18:38] Starting 'sass'...
        [18:18:38] Finished 'sass' after 15 ms
        [18:18:38] Starting 'default'...
        [18:18:38] Finished 'default' after 17 ms
        events.js:160
              throw er; // Unhandled 'error' event
              ^
        Error: scss\styles.scss
        Error: It's not clear which file to import for '@import "mixins"'.
               Candidates:
                 mixins.scss
                 mixins.css
               Please delete or rename all but one of these files.
                on line 3 of scss/styles.scss
        >> @import "mixins";
           ^
            at options.error (c:\Users\markj\node_modules\node-sass\lib\index.js:286:26)

I can see where i’m supposed to put the destination as below ( I think!), but I don’t know how to write the syntax. I tried Google but for some reason i’m not asking the right questions today!.

.pipe(gulp.dest(function(f) {
              return f.base;
           }))

Cheers

Mark

2

Have you tried something like:

.pipe(gulp.dest("/path/to/folder/relative/to/root"));
3

instead of

.pipe(gulp.dest(function...?

4

yes, so if you want the compiled files to be placed in the folder dist:

.pipe(gulp.dest("dist"));

EDIT https://www.youtube.com/watch?v=MKicSsrE_ls&list=PLpP9FLMkNf54eBRsKoPK7UZl-XvoBu3jA&index=13

1 Like
5

I kinda killed it I think :smiley:

it seemed to hang so I terminated it. I must have something pretty messed up.

I’ll check out your link and have another go.

Cheers

6

Ah its working, thanks Ben. That was a good link. I was adding the file name to the output whereas it should have only been the folder path.

I understand how it all works a little bit more now after watching his SASS vid.

Thanks

1 Like
7

@BenGitter I’ve also realised, a ‘default’ task that I thought seemed to be hanging, was in fact the file watch function :smiley: I also don’t know why I couldn’t do the syntax today either, I thought it was going to have a special gulp style for some reason.

I’m quite liking this gulp. I can see from his requires in the vid how handy it’s going to be.