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>
Related
while using the ES6 module language in nodejs it gives me an error of
" IMPORTS CANNOT BE USED OUTSIDE THE MODULE" ERROR IN CHROME BROWSER.
I am trying to build my project using Node js express mongoose morgan express-handlebars and ES6
but while I run the project it gives me an error for the same
I tried using .babelrc and webpack.config.js but not able to resolve it.
can anyone help me to achieve it?
I am putting images of my project for your reference.
Thank You
enter image description here
enter image description here
Babelrc:
{
"presets": [
["#babel/env", {
"useBuiltIns": "usage",
"corejs": "3",
"targets": {
"browsers": [
"last 5 versions",
"ie >= 8"
]
}
}]
]
}
webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Custom template using Handlebars',
filename: 'index.html',
template: 'main.hbs'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
],
loaders: [
{ test: /\.hbs$/, loader: "handlebars-loader" }
]
}
};
main.js:
enter code here
import Search from './models/search';
import Movie from './models/Movie'
import User from './models/user'
import * as searchView from './views/searchView'
import * as movieView from './views/movieView'
import { elements , renderLoader, clearLoader } from './views/base'
const state = {};
const controlSearch = async () => {
// const query = searchView.getInput();
const query = 'avengers';
if (query) {
searchView.clearInput();
searchView.clearResult();
state.search = new Search(query);
state.user = new User();
searchView.clearInput();
searchView.clearResult();
renderLoader(elements.searchRes);
await state.search.getResult();
await state.user.userSignUp();
clearLoader();
console.log(state.search.result);
searchView.renderResults(state.search.result);
}
};
elements.searchForm.addEventListener('submit', e => {
e.preventDefault();
controlSearch();
});
main.hbs
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Movie Recherer</title>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/all.min.css"/>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/home.css" />
</head>
<body>
<div class="container">
<div class="row">
{{{body}}}
</div>
</div>
<script src="/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script language="javascript" src="/js/main.js"></script>
<script language="javascript" src="/js/models/Movie.js"></script>
<script language="javascript" src="/js/models/search.js"></script>
<script language="javascript" src="/js/views/base.js"></script>
<script language="javascript" src="/js/views/movieView.js"></script>
<script language="javascript" src="/js/views/searchView.js"></script>
</body>
</html>
You need to include you import inside a module:
Try this:
<script type="module"> import btn from './helper' </script>
Add type="module" in every script tag of your main.hbs file
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" -->
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 -->
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 am using standard minify/uglify for css/js files and combine multiple files to main.min.css or app.min.js... However my .html file needs to be modified to point to these new file names too in <link> or <script>
Is there a way to automate this? Or how to modify .html files automatically to rename the file names in there using gruntjs?
You can do this with grunt-string-replace. Here's an example on how you could use it.
In my index.html you find the following import tags:
<!--start PROD imports
<script src="assets/dist/traffic.min.js"></script>
end PROD imports-->
<!--start DEV imports-->
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
<!--end DEV imports-->
Notice the 'start imports' and 'end imports' comments. By default (in DEV) we comment out the PROD import.
In my grunt file I then add the following task:
'string-replace': {
inline: {
files: {
'index.html': 'index.html'
},
options: {
replacements: [
{
pattern: '<!--start PROD imports',
replacement: '<!--start PROD imports-->'
},
{
pattern: 'end PROD imports-->',
replacement: '<!--end PROD imports-->'
},
{
pattern: '<!--start DEV imports-->',
replacement: '<!--start DEV imports'
},
{
pattern: '<!--end DEV imports-->',
replacement: 'end DEV imports-->'
}
]
}
}
}
Running the task (grunt string-replace) gives me:
<!--start PROD imports-->
<script src="assets/dist/traffic.min.js"></script>
<!--end PROD imports-->
<!--start DEV imports
<script src="assets/js/app.js"></script>
<script src="assets/js/services.js"></script>
<script src="assets/js/directives.js"></script>
<script src="assets/js/filters.js"></script>
<script src="assets/js/resources.js"></script>
<script src="assets/js/controller/homeControllers.js"></script>
<script src="assets/js/controller/adminControllers.js"></script>
<script src="assets/js/controller/reportsControllers.js"></script>
end DEV imports-->
Now the DEV imports have been commented out, while the PROD import is no longer commented out.
This is easily automated with grunt-processhtml. Here's an example from the docs:
<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->
<!-- changed to -->
<script src="app.min.js"></script>
Read more at https://www.npmjs.org/package/grunt-processhtml
A very suitable grunt task for this is grunt-html-build
It can substitute some some parts of the HTML from dev to a production version. See examples there, it is easy to setup.
Now, using the standard configuration presented for grunt-html-build, if minified files are dynamically named during build process like:
some-file.js -> another-name.min.js
One can configure grunt-html-build with:
[...]
scripts: {
bundle: [
'<%= fixturesPath %>/scripts/*.min.js'
]
},
[...]
A HTML section like:
<!-- build:script bundle -->
<script type="text/javascript" src="/path/to/js/libs/jquery.js"></script>
<script type="text/javascript" src="/path/to/js/libs/knockout.js"></script>
<script type="text/javascript" src="/path/to/js/libs/underscore.js"></script>
<script type="text/javascript" src="/path/to/js/app/module1.js"></script>
<script type="text/javascript" src="/path/to/js/app/module2.js"></script>
<!-- /build -->
Would yield to something like:
<script type="text/javascript" src="scripts/other-name.min.js"></script>
<script type="text/javascript" src="scripts/another-other-name.min.js"></script>
That is what #hyprstack is asking for in comments.
You could use grunt preprocess to do this: https://github.com/jsoverson/grunt-preprocess
Basically, you need to set up a template and have preprocess replace the relevant parts.
The Gruntfile part will look something like this:
preprocess: {
dev: {
options: {
context: {
DEBUG: true,
HOST: '<%= env.dev.HOST %>'
}
},
files: {
'index.html': 'tpl/index.tpl'
}
},
production: {
options: {
context: {
DEBUG: false,
HOST: '<%= env.production.HOST %>
}
},
files: {
'index.html': 'tpl/index.tpl'
}
}
},
I am using Middleman App do distinguish between dev vs build in my html or haml file:
- if development?
and
- if build?