Gulp file automation

JavaScript
1

Hi my .css file does not update when I change the .scss file (automation)
not sure what is wrong this is my gulpfile.js:

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-ruby-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    webserver = require('gulp-webserver');

gulp.task('js', function() {
  return gulp.src('builds/sassEssentials/js/myscript.js')
    .pipe(jshint('./.jshintrc'))
    .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('sass', function () {
    return sass('process/sass/style.scss', {
      sourcemap: true,
      style: 'expanded'
    })
    .on('error', function (err) {
        console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('builds/sassEssentials/css'));
});

gulp.task('watch', function() {
  gulp.watch('builds/sassEssentials/js/**/*', ['js']);
  gulp.watch(['process/sass/**/*'], ['sass']);
});

gulp.task('webserver', function() {
    gulp.src('builds/sassEssentials/')
        .pipe(webserver({
            livereload: true,
            open: true
        }));
});

gulp.task('default', ['sass', 'watch', 'webserver']);

its not processing.

2

That all looks fine…My work uses gulp and I tried comparing…

What does your console say? You are Windows I think…when you gulp build, then gulp watch, what happens when you then modify your CSS files?

Your process/sass/style.scss includes all the @imports of your build, right? Er, well how is your Sass set up? Is style.scss importing all your other Sass partials? Or do you do everything in style.scss? I feel like we need more information (unless a gulp expert can point out the error I’m missing).

3

My console does not say anything its not giving any errors…Yes im on Windows when I modify my.scss
it does not update the .css. When I inspect it seems to reading my scss file just fine too

935Ă—581 58.4 KB

I just have some variables in it (im just starting out).

$offwhite: #EEE8D6; 
$darkblue: #022933;

 html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-family: 'Helvetica', sans-serif;
  color: $offwhite;
  background-color: $darkblue;
}

.container {
  width: 80%;
  margin: 0 auto;
}

I believe it is set p normally. Yeah all I update is the scss

4

Please screenshot your console after you type in these two commands…

gulp build
gulp watch

Then modify something in your Sass file and save. Your console should give a new message.

5

seems to be something wrong

6

Have you tried the consoles instructions? :slight_smile:

Gulp does not come with the OS. Nor do any of your other packages (gulp-ruby-sass, etc).

7

This is the first time I actually see this though, I thought Gulp installed properly,
I guess it didnt…but it opened my folder files weird…

8

ok let me try to install it again…

9

ok does this mean it installed?

I did - $ npm install --global gulp-cli

10

What happens when you do gulp build?

11

I got the same error again but then I did $ npm install gulp that it suggested and I got just new line:

12

You didn’t type in gulp build :slight_smile: .

13

oh whoops. ok now I got this:

14

Are you typing in “npm gulp build”? That’s not what I requested you to type in.

15

yeah just like above? ^ is there something wrong?

16

I said gulp build. Not npm gulp build. :slight_smile:

17

oh then I get this:

thats weird tho I just posted my file here

18

Are you in the directory of your gulp file? Where your gulp file is held?

19

20

Looking at your console, you are not inside sassEssentials? I’m not familiar with that terminal but don’t most terminals show the path you are at??