Gulpfile not outputting to correct location

Question

So I'm trying to set up the basic gulp workflow with sass and I am missing something, but I can't find it. I've searched the web for a workflow example with dist/src folders, NOBODY takes you step by step on how and why things are done.

Anyway, I have a basic folder project with dist, src, node_modules, gulpfile.js and package.json.

My main problem is that the outputted src/sass/main.scss is not outputted into dist/css/main.css. This works only if I create a src/css/main.css file and the outputted .css file is generated there, although I clearly have .pipe(gulp.dest("dist/css")) in my gulpfile.js.

Here's my gulpfile.js

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./src"
    });

    gulp.watch("src/scss/*.scss", ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("src/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

And in my html file I'm linking the .css with this:

 <link rel="stylesheet" type="text/css" href="css/main.css"/>

I haven't even tried to add more plugins into gulp because for the life of me I can't figure out why this doesn't work.

Directory tree to make things easier to understand:

|-dist
    |-css
        |-main.css
    |-img
    index.html
|-node_modules
|-src
    |-css
        |-main.css
    |-img
    |-sass
        |-_custom.scss
        |-main.scss
    index.html
gulpfile.js
package.json

Can someone please explain why I need to run the server in src and not dist? Does gulp generate the sass and then knows how to copy it to dist? What is actually wrong in my gulpfile?

wired wired · Accepted Answer · 2017-05-22T14:12:10

in src there is no scss folder that you are targeting with

return gulp.src("src/scss/*.scss")

try to fix that first

Gulpfile not outputting to correct location

1 Answers