I would like a JavaScript file which builds and minifies an HTML and CSS file and pulls them as strings, possibly, so that it can all be one minified JS file to be used.
I'm curious what's the best flow for achieving this. I see that with gulp inject, this may work?
Found a solution: gulp-js-text-inject did exactly what I needed here.
Related
I have been looking into this subject for ages and cannot find anything about it. My question is:
How do I put SCSS into a normal HTML document with JavaScript in it as well.
Can I put the SCSS in a <style> tag or in an external stylesheet? If so (the stylesheet one) does it have to be like the following format: style.scss or style.css.
Thank you if you can help.
SCSS needs to be transformed into CSS before browsers can use it.
You could put SCSS inline in a <style type="text/scss">...</style> element and then use client-side JS to convert it to CSS and inject the resulting CSS into the DOM.
Likewise your build toolchain could parse the HTML, pluck out the SCSS, run it through a converted to get CSS and then inject that back into the page.
SCSS will not run in a browser without first being compiled to native CSS.
Webpack seems to be the build tool of choice for doing this during development.
well if your using VS CODE then there is a very simple way to add scss with html
(1) install the live sass compiler extention
Link : https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
(2) create a file (style.scss).
(3) after the installation.Write some SCSS code in the file and then you will find (watch sass button) on left bottom menu click on it and it will create 2 files (1)style.css and (2)style.map.css.
(4)now whatever you right in .scss file it will compile in style.css. Now connect your (style.css) with html and boom it will work......
I am new to webpack. Want to know how do we lessify or convert less files into css using webpack, like we use cssify plugin in gulp.
You use webpack's less-loader (along with the css-loader and probably the style-loader) and require() the less file the same way you would a javascript module. See Using Loaders for more info on how loaders work in webpack.
You could take a look at Extract-Text-Webpack-Plugin. Basically, webpack is a JS module bundler so (as far as I know) there's no way to compile less directly into css. Instead, you can 'load' less file into js using something like less-loader and other loaders, and extract text to make separate css file using plugin.
I'm new to Polymer and one of the things I like is that I can declare global CSS styling and Javascript libraries in the elements.html file. However, in the demos I have seen elements.html has been reserved exclusively for importing Polymer templates.
Is it bad style to overload elements.html with CSS and JS imports?
No, there is nothing wrong about including JS and CSS files in the elements.html.
Think of elements.html as a non-ui web-component.
There is just one important thing to remember:
Polymer team has created a tool called Vulcanize which takes a file like elements.html which imports all the custom elements, to knit them together into a single file for reducing the number http requests the browser makes to gather the required resources. Adding JS and CSS files here will get this tool confused and generated rather odd results.
So this is exactly why you don't see official examples and tutorials include JS and CSS files in the elements.html.
More about Vulcanize:
https://github.com/Polymer/vulcanize
https://www.polymer-project.org/0.5/articles/concatenating-web-components.html
Hope my writing is clear.
I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
In Sass we can combine multiple partials into single css output like
#import "scss/header";
#import "scss/footer";
#import "scss/navigation";
#import "scss/sidebar";
into
final.scss > final.css
Is there any method to do same with raw .HTML files (not .php or .asp) like
#import "header.html";
#import "scss/footer.html";
#import "scss/navigation.html";
#import "scss/sidebar.html";
into index.html
The above is just an example to explain, what I'm asking
I know I can do this using php includes but i want to know if i can with just .html files. I just want to combines files at my PC not on server.
It's not possible in pure HTML.
To do it on the client side, you would have to use Ajax hackery with JavaScript to pull the files into the DOM, which I imagine would be pretty slow and error-prone. I don't think anybody seriously does that. There are also iframes, obviously, but again for most use cases this would be unsatisfactory.
Since you tagged your question with "rubygems": If you are using Rails, you can use partials on the server side for this purpose.
You can use Server Side Includes (SSI) to include other files in your .html files. In most cases you need to use the .shtml file extension for the includes to work. To learn how to implement SSI read this article from HTMLGOODIES: SSI: The Include Command