I'm trying to auto-refresh my page when I make changes with broswer-sync and gulp.
So far I have it working with my html but I can't seem to figure it out with my css code too.
I have this line of code in my gulpfile.js that works quite well with ONLY html.
gulp.watch("*.html").on("change", reload);
Any help? Thanks! I've also tried putting *.css into the .watch() function and had no luck. I also have a folder with my css in it named "css".
Found the solution!
You cannot see changes with javascript nor CSS. If you want that you'll need to do a live server following https://www.npmjs.com/package/gulp-live-server
EDIT
Go download live server in VSCode, you're welcome...
Related
I am new to SCSS. I am working on a python web application. I have an issue that the changes in SCSS are not reflected. Only the changes in CSS file are reflected.
I checked online and created a mapping file:
{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AACE;EACE","file":"index.css"}
I still very confused. Do I need to run some command to map the SCSS to css whenever I change the scss file? If yes, what command should I run?
Thanks!
You need to make sure your workflow compiles the scss files to css everytime you start your application.
I'm building a React/Laravel app. However, when I tried to style the layout, I found that I cannot edit in public/css/app.css since every time I run the npm run dev command, the changes I've made disappear from the app.css.
Therefore, I created a style.css but I was confused about whether I should put the style.css into the public folder or resources folder. Moreover, after looking at Laravel docs, this link said that I should add a code to webpack.mix.js. So here's what I wrote
.styles('public/css/style.css', 'public/css/all.css');
adding this to the last part of the whole code:
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles('public/css/style.css', 'public/css/all.css');
After running npm run dev, I refreshed the page and the page is still not showing the changes from style.css.
Here is my repo: https://github.com/kikidesignnet/hotelreviews and my website which I'm editing: http://immense-beach-76879.herokuapp.com/
What am I missing?
Add the all.css file to your main layout.
Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>
I installed this generator through Yeoman, and as far as I know everything has been installed successfully. When I run gulp serve, the default webpage seems to load without style as pictured below. The SASS seems to be compiling into CSS correctly, and both my CSS and HTML have been validated.
Any suggestions? Thanks :)
I read in a blog you could use gulp-file-include to include .html files, It works but the code below winds up overwriting the include markup in the html...
You might think why don't I have gulp-file-include spit out to another destination folder? Reason being is then I can't get browser-sync to refresh the browser after that. Essentially this link is illustrating my problem...
Looks like there is supposed to be another 'output' folder which will be distilling all the includes into a new .index.html file
I know I could just open up the file which is receiving the includes and then browserSync would work, but isn't that an extra step?
Please ask questions as this seems very inceptionesque!
gulp.task('fileinclude', function() {
gulp.src('builds/development/*.html')
.pipe(fileinclude())
.pipe(gulp.dest('builds/development/'));
});
Turns out I hadn't included the fileinclude in my watch task...
For anyone who wants to check out what I ended up with check out my gist...
https://gist.github.com/antonioOrtiz/2bf2e27b8e0a23115034