Share this post

Link to post

Share on other sites

I’m losing a lot of faith, trying to use gulp and have problem after problem, now the bloody thing (on my work computer) is telling me gulp-sass failed because I don’t have permission.. what the hell is going on with it? All I want is scss conversion, browser-sync and autoprefixer to work in bootstrap4, why is it being so bloody difficult?

Share on other sites

I wouldn't even bother with Gulp nowadays. For running tasks you can just run NPM scripts - essentially bash scripts and for more complex bundling etc then Webpack is the tool to use. However in your case I'd just roll with NPM scripts

you then can run these tasks prefixed with `npm run` e.g. `npm run build` from your command line interface (CLI)

As you can see the build script runs the Sass script and once that has completed it runs the autoprefixer script.

The sass script runs the node-sass package and minifies it (--compressed) and outputs the result in `./dist/` folder. The next argument is the source file.

BrowserSync could be added too as part of a watch task. I don't use browserSync myself but here's an example of me doing something similar for running the demo for my Sass with a watch task and sass linting etc framework https://github.com/NebulaUI/nebula-css/blob/master/package.json#L7

Setting these things up requires knowledge in things like npm, node and so on because they run in that environment and things can get complex because of the huge amount of options available. There are boilerplate repos around where you can clone down pre-built scripts.

To learn yourself how they actually work will require some reading as there's a number of technologies involved. NPM scripts for example are essentially bash scripts so it makes sense to learn basic Bash.

Edited February 14 by rbrtsmith

Share this post

Link to post

Share on other sites

I wouldn't even bother with Gulp nowadays. For running tasks you can just run NPM scripts - essentially bash scripts and for more complex bundling etc then Webpack is the tool to use. However in your case I'd just roll with NPM scripts

you then can run these tasks prefixed with `npm run` e.g. `npm run build` from your command line interface (CLI)

As you can see the build script runs the Sass script and once that has completed it runs the autoprefixer script.

The sass script runs the node-sass package and minifies it (--compressed) and outputs the result in `./dist/` folder. The next argument is the source file.

BrowserSync could be added too as part of a watch task. I don't use browserSync myself but here's an example of me doing something similar for running the demo for my Sass with a watch task and sass linting etc framework https://github.com/NebulaUI/nebula-css/blob/master/package.json#L7

Setting these things up requires knowledge in things like npm, node and so on because they run in that environment and things can get complex because of the huge amount of options available. There are boilerplate repos around where you can clone down pre-built scripts.

To learn yourself how they actually work will require some reading as there's a number of technologies involved. NPM scripts for example are essentially bash scripts so it makes sense to learn basic Bash.

wow, golddust, i’m assuming if I use that, because it’s virtually a batch the server would have to be restarted for reset to see changes on save, would the atom-live-server do it automatically or would I need something like run-watch?

If that doesn't work try looking on the node-sass repo at their issues, or google around, stack overflow etc.

Also have a read of https://css-tricks.com/why-npm-scripts/ for more info on running npm scripts. you can install a package called "onchange" that will watch for changes in files/paths that you specify then you can trigger other npm scripts to execute when changes occur.