Gulp file automation

JavaScript
41

What do you mean exactly. You have the following in the terminal

91a8ebfca6f2a7daf55b7271945e952980a37f8f

If you go to your sass file and change something, You should see the terminal (above) change

If that happens, your gulp file is perfect. You just need livereload in your browser

42

not that the .css file, that needs to change also in realtime as a I modify my .scss which it isnt…[quote=“relio, post:41, topic:224238”]
You just need livereload in your browser
[/quote]

whats that?

43

As you write sass, gulp updates css - that’s the point of all this. Every time you write sass, gulp takes that code and adds it to your css.

If that works. Now you need to go to your browsers extension website and search for live reload.

But first make sure that terminal window changes when you modify your sass

44

yes that is happening

Yeah but its not doing it. It seems like the index.html only updates via .css and not my .scss. it is doing a live reload only when I update my .css weird…

45

It is doing what it is supposed to do. If you want to be sure, open you css and your sass file. Modify your sass, then you’ll that has been updated.

Now you need that livereload extension in your browser. That asks the browser “don’t ignore the changes coming in” sort of

46

It seems like the index.html only updates via .css and not my .scss. it is doing a live reload only when I update my .css weird…

47

seems like my browser already has that

48

I don’t understand what you are trying to do. You write your sass, sass is supposed to update your css.

In your browser’s bar you should see the live reload icon. It’s a refresh looking icon with a circle in it. You click that and the circle fills will a color. Then modify something in your sass again and if that was the problem you should see the browser refresh

It could be I am totally wrong I have installed all this few years a go and I might be totally wrong :slight_smile:

49

What I am saying is when I try to update my .scss it doesnt update the page (or the .css) which is the file
im suppose to be modifying. Now with that being said…when I update my .css file it updates the page
in live reload. It seems it is the opposite for me I am not sure why…

im not trying to do anything im just not getting the correct way of using my .scss.

50

this is what I got

936×878 53.7 KB

51

Aha. I completely misunderstood you before.

Now I don’t know what the problem might be. I will look into it.

52

yeah. ok please get back to me id appreciate it

53

Quickly, can you post the code you have on your package.json - so that I can quickly run what you have

54 
{
  "name": "sassEssentials",
  "version": "0.0.1",
  "description": "A website for my Sass Essential Training course on Lynda.com",
  "repository": {
    "type": "git",
    "url": "https://github.com/planetoftheweb/sassEssentials.git"
  },
  "author": "Ray Villalobos",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-jshint": "^1.9.0",
    "gulp-ruby-sass": "^1.0.5",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-webserver": "^0.9.1"
  },
  "dependencies": {
    "sass": "^0.5.0"
  }
}
1 Like
55

It works for me!

I copied four grunt code. Then ran gulp in terminal

This is my setup

877×544 39.8 KB

56

ugh why not for me? lol

why is it doing the opposite for me?

57

I don’t know.

the only thing I can recommend is for you to to try and debug you code by doing what I did, i.e

  1. delete the builds folder. Then run gulp again and try testing again
  2. if that doesn’t do anything. Make a copy of your project so you don’t lose anything
  3. delete the contents of your sass file and do what I did, a simple background change
    if that works, you had a bug on your sass
58

or just clone the git repo. run npm install on it, then gulp. Then it might work

59

the problem might be the error you get on line 9. I was wrong with my suggestion, you actually need to run

gem install sass

that might be the broplem. if that gives you an error try

sudo gem install sass
60

ok let me try that.