Giters

damonbauer / npm-build-boilerplate

A collection of packages that build a website using npm scripts.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Watch does not work for SCSS files in windows 10

homam-gh opened this issue · comments

commented

Hi @damonbauer ,
I read your article in css-tricks.com and tried to replicate it based on my needs,
I use a windows-10-x64 but the scripts only watch HTML files and ignore SCSS files completely(on the build level and page reload level).
Here is my "Package.json" and i hope you can help me.

{
  "name": "devhints",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "autoprefixer": "postcss -u autoprefixer -r dist/css/*",
    "scss": "node-sass --output-style compressed -o dist/css src/scss",
    "serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html, !node_modules/**/*.html'",
    "build:css": "npm run scss && npm run autoprefixer",
    "watch:css": "onchange 'src/scss/**/*.scss' -- npm run build:css",
    "watch:all": "npm-run-all -p serve watch:css",
    "postinstall": "npm run build:css && npm run watch:all"
  },
  "author": "HomamGhassemy",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "browser-sync": "^2.13.0",
    "node-sass": "^3.7.0",
    "npm-run-all": "^2.1.1",
    "onchange": "^2.5.0",
    "postcss-cli": "^2.5.2"
  }
}

Please tell me if there is anything more needed.
Thanks

commented

Hey @homamghassemy, are any errors thrown, or anything in the console when a scss files changes?

commented

Hay @damonbauer , First Thanks for your quick response. There is nothing it completely ignores SCSS files and changes.
When I use it with Java script files it ignores them too.
I think problem is with wildcards in windows command lines, so I tried "Global" from npm and simply I could not make it work.
I am not a Java Script ninja. :D

commented

You're right, Windows doesn't play well with wildcards ("globbing").

I just released version 1.2.0 that removes globbing on the watch tasks.

Unfortunately, I don't have a Windows machine to test on; let me know if this change helps!

commented

Hay again @damonbauer, Thanks i checked it again with your new release, and Sorry it did not work either.
So I think i go back and use gulp and grunt.
But thanks Eventually and if found any solution I will be happy hearing from you.

commented

Hay again @damonbauer , Only wanted to tell you I found the problem and it worked thanks to you.
Problem was windows don't understand single quotation inside double quotation " ' ' " .
The solution is escaping with \ and for sake of completion i paste my "packege.json" below:

{
  "name": "devhints",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "autoprefixer": "postcss -u autoprefixer -r dist/css/*",
    "scss": "node-sass --output-style compressed -o dist/css src/scss",
    "serve": "browser-sync start --server --files \"dist/css/*.css, **/*.html, !node_modules/**/*.html\"",
    "build:css": "npm run scss && npm run autoprefixer",
    "watch:css": "onchange \"src/scss\" -- npm run build:css",
    "watch:all": "npm-run-all -p serve watch:css",
    "postinstall": "npm run build:css && npm run watch:all"
  },
  "author": "HomamGhassemy",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "browser-sync": "^2.13.0",
    "node-sass": "^3.7.0",
    "npm-run-all": "^2.1.1",
    "onchange": "^2.5.0",
    "postcss-cli": "^2.5.2"
  }
}