I have code like this
<html>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="path_to_css/some_css.css" rel="stylesheet" type="text/css">
</head>
<body>
...
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="jquery/jquery.min.js"></script>
</body>
</html>
and I need plugin/loader or other way to get my html file with replaced link and script tags to content of this files, is there any way to do it?
Finnaly i wrote own plugin which fit my needs
include-file-webpack-plugin
It actually can be accomplish with:
npm i --save-dev css-loader to-string-loader
configure your webpack with
module: [
rules: [
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader']
}
]
}
Then in your project you can access the css as string like so
const cssContent= require('path_to_css/some_css.css');
console.log('your css is: ', cssContent.toString());
Or maybe you want inject it manually to the page with:
const boostrap= require('bootstrap/dist/css/bootstrap.min.css');
let style= document.createElement('style');
style.id= 'boostrap';
style.setAttribute('type', 'text/css');
style.innerHTML= boostrap.toString();
document.body.appendChild(style);
Reference
Inject CSS stylesheet
css-loader
Related
My HTML file:
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
My JavaScript file - script.js:
import * as FilePond from 'filepond';
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred, the browser said:
Uncaught SyntaxError: Cannot use import statement outside a module
So I edited the script.js into this:
const FilePon = require('filepond')
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred again, the browser said:
Uncaught ReferenceError: require is not defined at script.js:1
How can I fix it?
It's simple:
Just include the FilePond css & js file from CDN instead like:
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
Next, you do not need any import or require. You can simply use the rest of the code as FilePond is globaly declared now like:
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(myPond.element);
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
require() is a NodeJS function, not a browser JS function.
If the package uses npm, chances are its made for NodeJS and not browser JS.
If you want to include js files in the browser, you need to use html includes:
<script src="script.js"></script>
Or a templating solution which allows to include other files such as EJS
Actually, require() is for Node.js. You can't use it in browsers.
First solution:
Add the type="module" attribute to the <script> tag.
So it will be <script type="module" src="script.js"></script>
Second solution:
Just add <script src="https://cdn.jsdelivr.net/npm/filepond#4.13.6/dist/filepond.js"></script> and <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> before calling script.js
I think this will work for you:
<script src="https://cdn.jsdelivr.net/npm/filepond#4.13.6/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script>
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
</script>
I have template folders full of arbitrary css/html/js/image files. I want to be able to access them via require:
var someHtml = require('./templateFolder/foo.html');
Here, foo.html contains references to foo.png, foo.css, and foo.js, I want them all inlined in the html document itself, in base64 encoding, style tags, and script tags, respectively. Is this possible? If so what would the webpack configuration look like?
EDIT: Further Context
I want this
<html>
<head>
<link rel="stylesheet" type="text/css" href="foo.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
</body
</html>
to be transformed into this:
<html>
<head>
<style> Contents of foo.css </style>
<script> Contents of bar.js</script>
</head>
<body>
</body
</html>
In other words, I want a each html file and all of its resources to be transformed into a single html file. I don't necessarily have a lot of control as to what the html files look like.
It looks like you could use the html-loader for webpack for your use case:
https://github.com/webpack-contrib/html-loader
A sample webpack.config file would include:
module: {
rules: [{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: true
}
}],
}]
}
You should then be able to require a html file you want with require("html-loader!./file.html");
For more information look up the link above!
Edit:
To automatically inline images for example you can make use of the attrs parameter:
By default every local is required (require('./image.png')). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).
You can specify which tag-attribute combination should be processed by this loader via the query parameter attrs. Pass an array or a space-separated list of : combinations. (Default: attrs=img:src)
Edit:
To do the same for stylesheet links and js you could use https://www.npmjs.com/package/html-inline-source-webpack-plugin
I'm new to Laravel and whole framework stuff.
I do (may) understand a part of how the page rendered via laravel, but even after extensive search, I do not understand how laravel mix works.
Suppose that there is a page requires a global js and css library (lets specify jQuery and bootstrap)
Also the page requires custom js file like someJsTools.js.
Elementary speaking, in the past, those files referenced via <script src="blah"></script> and <link rel="blah" /> inside head tag and I used to it. In this env, all I have to do is specify those tags page by page.
// pageA requires jQuery.js, bootstrap.css and one CUSTOM JS file imatrouble.js
<head>
<link rel="stylesheet" herf="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="imatrouble.js"></script>
</head>
//pageB requires jQuery.js, bootstrap.css and two custom js files.
<head>
<link rel="stylesheet" herf="bootstrap.css"/>
<script src="jquery.js"></script>
<script src="imatrouble.js"></script>
<script src="withimatroubleimadisasterlikewhateveryoucanimagine.js"></script>
</head>
PageA and PageB both requires common jQuery.js and bootstrap.css file. From what I learn, laravel Mix combine all js files into one and I don't get it here.
Problem 1 - One file do everything?
If it is true that "mix" things all together as one file, then how this one file could handle all of this different requirements seperatelly? I believe that my knowledge is wrong and its from my incorrect understanding of laravel mix and perhaps webpack mechanism.
Problem 2 - How can I manage all different page and every different situation?
Whether the problem above is originated from my missunderstanding or not, I cannot figure out what part of I (will) do could cause differences between pages. If mix only works for common global library, then all I have to do is just load custom js/css files manually. I currently assume that it is highly unlikely.
Please, someone help me to escape this chaos.
Have a good day.
It is purely based on your requirements. It depends on how you are customising your assets file.
For example :
Jquery, Angular,Bootstrap,Font Awesome is common for all your pages. So what I usually do is. I combine all css files to one file and all js files to one. Like below..
CSS mix
elixir(function(mix) {
mix.styles([
"libraries/bootstrap.css",
"libraries/font-awesome.min.css",
"custom/default.css",
], 'public/assets/css/common.css');
});
JS mix
elixir(function(mix) {
mix.scripts([
"libraries/jquery-1.10.2.js",
"libraries/bootstap.js"
"libraries/angular.js",
"libraries/angular-animate.js",
"custom/defaut.js"
], 'public/assets/js/common.js');
});
Suppose some pages need specific dependency[product, orders...etc]. For instance if product page needs wow.js, product.js and wow.css,product.css
CSS mix
elixir(function(mix) {
mix.styles([
"libraries/wow.css",
"custom/product.css",
], 'public/assets/css/product.css');
});
JS mix
elixir(function(mix) {
mix.scripts([
"libraries/wow.js",
"custom/product.js"
], 'public/assets/js/product.js');
});
So final laravel mix file looks like below
gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.sourcemaps = true;
/**
* Global CSS MIX
*/
elixir(function(mix) {
mix.styles([
"libraries/bootstrap.css",
"libraries/font-awesome.min.css",
"custom/default.css",
], 'public/assets/css/common.css');
});
/**
* Global JS MIX
*/
elixir(function(mix) {
mix.scripts([
"libraries/jquery-1.10.2.js",
"libraries/bootstap.js"
"libraries/angular.js",
"libraries/angular-animate.js",
"custom/defaut.js"
], 'public/assets/js/common.js');
});
/**
* Product CSS MIX
*/
elixir(function(mix) {
mix.styles([
"libraries/wow.css",
"custom/product.css",
], 'public/assets/css/product.css');
});
/**
* Product JS MIX
*/
elixir(function(mix) {
mix.scripts([
"libraries/wow.js",
"custom/product.js"
], 'public/assets/js/product.js');
});
Now all your assets files are ready. Now you need to include wherever you want.
Suppose on your homepage you only requires common.js and common.css files.
homepage.blade.php
<head>
<link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/css/common.js') }}"></script>
</head>
On the product page, you require both common and product assets file dependency. Include like below
product.blade.php
<head>
<link rel="stylesheet" href="{{ asset('assets/css/common.css') }}"/>
<link rel="stylesheet" href="{{ asset('assets/css/product.css') }}"/>
<script type="text/javascript" src="{{ asset('assets/js/common.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/product.js') }}"></script>
</head>
I am trying to port angular 2 tutorial with Django backend
Here is my html file
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="/static/main.js"></script>
<script src="/static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="/static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="/static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/static/node_modules/systemjs/dist/system.src.js"></script>
<script src="/static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/static/node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('/static/app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
I found out that System.js is not working in
System.import('/static/app/main')
I have to use
System.import('/static/app/main.js')
and add .js manually to all my non 3rd libraries import for the angular app to work.
The interesting thing about this is that I don't have to add .js to
'angular2/core'
'angular2/platform/browser'
since System.js automatically resolves the import as long as I add .js extension manually to all the import for files I wrote.
But if I set
System.defaultJSExtensions = true;
I dont' have to add .js to my files anymore but System.js loses its capability to import all libraries in node_modules and instead try to use default django dir
http://localhost:8000/myApp/angular2/platform/browser.js
Can someone give me some guidance?
Thanks
I think you misunderstand what defaultJSExtensions configures. The latter simply allows to add the js extension when importing modules:
System.defaultJSExtensions = true;
// requests ./some/module.js instead
System.import('./some/module');
This applies if the module wasn't previously and explicitly registered using System.register.
The angular2.dev.js file contains modules for Angular2 core (registered explicitly with System.register). Including the file with a script element simply makes them available for imports.
If you want to use instead single JS files of Angular2 from node_modules/angular2 (for example core.js, ...), you need this SystemJS configuration:
System.config({
defaultJSExtensions: true,
map: {
angular2: 'node_modules/angular2/src',
rxjs: 'node_modules/rxjs'
},
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
What is important above is the map block to tell SystemJS where to find modules with names that start for example by angular2/.
In this case, no need to import Angular2 bundled JS files (angular2.min.js, ...).
I'm using Gulp for running tasks like minify and conctat my css, js...
I use gulp-minify-css plugin for minify my css, and it's working fine... but I have one question, I need to change in my html the new routes of the .css and .js? Can I do that with a Task?
// including plugins
var gulp = require('gulp')
, minifyCss = require("gulp-minify-css");
// task
gulp.task('minify-css', function () {
gulp.src('./Css/one.css') // path to your file
.pipe(minifyCss())
.pipe(gulp.dest('path/to/destination'));
});
Thanks!!
You can use gulp-useref plugin to extract all css files referenced in your html, minify them and save the new html with replaced references.
Here's a full working example:
index.html
<html>
<head>
<!-- build:css css/combined.css -->
<link href="css/one.css" rel="stylesheet">
<link href="css/two.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
(...)
</body>
</html>
gulpfile.js
var gulp = require('gulp');
var useref = require('gulp-useref');
var minifyCss = require('gulp-minify-css');
gulp.task('minify-css', function () {
var assets = useref.assets();
return gulp.src('index.html')
.pipe(assets)
.pipe(minifyCss())
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist/index.html'));
});
This will produce a single, concatenated and minified css in css/combined.css and the following html in dist/index.html
<html>
<head>
<link href="css/combined.css" rel="stylesheet">
</head>
<body>
(...)
</body>
</html>