Ok guys, Im trying to understand this but I cant find any basic tutorials.
I have uncss, this is my basic task
uncss: {
dist: {
src: ['about.htm', 'index.htm'],
dest: 'css/tidy.css',
options: {
report: 'min' // optional: include to report savings
}
}
}
next I have grunt-processhtml, I am trying to write a task to replace all css in index.htm
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
and turn it into
<link media="all" rel="stylesheet" href="/css/tidy.css">
Im not sure how to do this, I know I use grunt-processhtml like
processhtml: {
dist: {
files: {
'index.html': ['index.html'],
'about.html': ['about.html']
}
}
}
but how do I replace all
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
with my new tidy.css ?
Please guys, I need some basic help.
Another option is to use grunt-string-replace.
I use it for srcset, because grunt-processhtm can't handle multiple sourceset attributes. E.g.:
<img srcset="../img/img_one_400.jpg 400w,
../img/img_one_600.jpg 600w,
../img/img_one_1200.jpg 1200w,
../img/img_one_1408.jpg 1408w"
sizes="100vw"
src="../img/img_one_1408.jpg"/>
configuration in the Gruntfile.js:
'string-replace': {
inline: {
files: {
'build/pages/': 'build/pages/*.html'
},
options: {
replacements:[
{
//../img/ -> recources/img/
pattern: /\.\.\/img\//g,
replacement: 'fileadmin/img/'
}
]
}
}
}
In your case it would be something like:
[...]
options: {
replacements:[
{
pattern: /\/css\/some\.css/g,
replacement: '/css/tidy.css'
}
]
}
[...]
According to grunt-processhtml you can use the following to output the CSS links according to the environment. I am not sure how to define the environment though (check the documentation).
If it's dist the tidy.css file will be created alreay and it will be linked
<!-- build:template
<% if (environment === 'dev') { %>
<link media="all" rel="stylesheet" href="/css/some.css">
<link media="all" rel="stylesheet" href="/css/somemore.css">
<% } else { %>
<link media="all" rel="stylesheet" href="/css/tidy.css">
<% } %>
/build -->
Related
Here is my webpack.config.js
module.exports = {
entry: "./src/index.js",//path relative to this file
output: {
filename: "../frontEnd/bundle.js",//path relative to this file
},
externals: {
puppeteer: 'require("puppeteer")',
},
mode: 'development'
}
Here is the file, index.js, where the webpack is ran:
var backendScript = require('../backEnd/backend');
var safeBackendScript = require('../backEnd/safeBackend');
function test(){
document.getElementById("Fname").value= "John"
document.getElementById("Lname").value= "Smith"
document.getElementById("Phone").value= "1234567890"
document.getElementById("Email").value= "Jsmith#domain.com"
document.getElementById("Saddress").value= "123 Main Street"
document.getElementById("Zip").value= "12345"
document.getElementById("country").value= "USA"
document.getElementById("state").value= "NJ"
document.getElementById("cardtype").value= "AE"
document.getElementById("Cname").value= "JOHN H SMTIH"
document.getElementById("Cnumber").value= "1234567890101112"
document.getElementById("CVV").value= "123"
document.getElementById("cardmonth").value= "01"
document.getElementById("cardyear").value= "2035"
document.getElementById("category").value= "jackets"
document.getElementById("kword").value= "Supreme Jacket"
document.getElementById("delay").value= "120"
document.getElementById("color").value= "C2"
document.getElementById("size").value= "L"
}
module.exports = {
test: test
}
And then here is my html with the function ran:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type= "text/javascript" src="./bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Supreme Bot</title>
</head>
<body style="margin: 20px">
<button onclick="test()"> test </button>
</body>
</html>
then after clicking on the button, it states that test() is undefined...
I can't figure it out...
Any help is GREATLY appreciated.
You aren't exporting test() to window.
module.exports = {...} won't automagically get injected into window, but:
you can set the output.libraryTarget: 'window' and output.library: 'something' configuration options and get window.something.test() (docs here), or
you can manually do window.test = test; at the end of your Webpack entry point instead of exporting things.
I am trying to insert both my style and bootstrap in my React JS project. But I get the error: Refused to apply style from 'http://localhost:8000/bootstrap-3.3.7-dist/css/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
I want it to be inserted through the index.html because it's what I am used to. I know the way to insert bootstrap by npm and importing it but I still just want it to be inserted through the index.html.
Hierarchy of files
Currently the following are my codes:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ticketing</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="./style/style.css" />
</head>
<body>
<div id="app"></div>
<script src="/app/bundle.js"></script>
</body>
</html>
WEBPACK.CONFIG.JS
var webpack = require("webpack");
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module:{
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query:{
presets: ["react", "es2015", "stage-2"]
}
}
]
}
};
module.exports = config;
I think you should move the css and style folder into the src folder. Or try changing ./ to ../.
With following steps you can get it:
1st install bootstrap from npm (npm i bootstrap),
go to your app.js file add
#import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
#import 'YOUR_CSS_FILE.css'
I intend to develop an angularJS client where I will use angular components. This will lead to multiple .js/.css files.
In order to avoid manually referencing each newly added js/css file I intend to use a grunt-include-source task.
The problem is that, after configuring the Gruntfile.js, the „grunt includeSource” task runs, returning „Done, without errors.” status but no update is made in the index.html file.
My project structure is the one presented in the attached picture (I use WebStorm as IDE).
My index.html file is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RavenApp</title>
<!-- include: "type": "css", "files": "*.css" -->
</head>
<body>
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-mocks/angular-mocks.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- include: "type": "js", "files": "*.js" -->
</body>
</html>
My Gruntfile.js is the following:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
templates: {
html: {
js: '<script src="{filePath}"></script>',
css: '<link rel="stylesheet" type="text/css" href="{filePath}" />'
}
},
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
Could anyone indicate me what I have done wrong?
Thank you.
We don't need to write templates key under includeSource key:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-include-source');
grunt.initConfig({
wiredep: {
target: {
src: 'app/index.html'
}
},
includeSource: {
options: {
basePath: 'app',
app: {
files: {
'app/index.html': 'app/index.html'
}
}
}
}
});
};
HTML code is enough for including js and css:
<!-- include: "type": "css", "files": "*.css" -->
<!-- include: "type": "js", "files": "*.js" -->
In my source HTML I have:
<!-- bower:css -->
<link rel="stylesheet" href="../bower_components/angular-ui-notification/dist/angular-ui-notification.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.css" />
<link rel="stylesheet" href="../bower_components/nya-bootstrap-select/dist/nya-bs-select.css" />
<!-- endbower -->
made with grunt wiredep, that works great.
Moreover I want concat all this css to one file. I don't want to add this file manually in gruntfile.js. How can I use usemin or bower-concat to do this automatically. I'm doing the same with js file and everything works correctly.
For js I have
1.
wiredep: {
task: {
src: [
'src/index.html'
]
}
},
In html
< !-- bower:js -->
< !-- endbower -->
2.
bower_concat: {
dist: {
dest: 'src/temp/js/panel-dep.js',
cssDest: 'src/temp/css/panel-dep.css',
bowerOptions: {
relative: false
},
mainFiles: {
package: [ 'path/to/its/file.css' ]
}
}
},
3.
uglify:{
options:{
manage: false
},
dist:{
files:{
'dist/js/panel.min.js': ['src/temp/js/**/*.js']
}
}
},
Then I get nice working panel.min.js and HTML with link to this file
I have a task to cdnize my files:
gulp.task('makeCdn', function () {
gulp.src(['./Views/SharedTemplates/*.cshtml'])
.pipe(cdnizer({
relativeRoot: './wwwroot/lib',
allowMin: true,
files: [
{
cdn: "google:angular"
},
{
cdn: "google:jquery"
},
{
cdn: "cdnjs:select2"
},
{
cdn: "cdnjs:twitter-bootstrap",
package: "bootstrap"
}
]
}))
.pipe(gulp.dest('./Views/Shared/'));
});
It nicely converts the js references, e.g. from:
<script src="../../wwwroot/lib/select2/select2.js"></script>
to:
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
BUT - it leaves the css links untouched:
<link rel="stylesheet" href="../../wwwroot/lib/select2/select2.css" />
.
And an additional question, why it's making such conversion from:
<script src="../../wwwroot/lib/angular/angular.js"></script>
<script src="../../wwwroot/lib/angular-resource/angular-resource.js"></script>
to:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>