Grunt bake file include cannot read file - html

I have the following index.html in my root directory
When I run grunt I get the following error:
Verifying property bake.my_target exists in config...OK
Files: index.html -> dist/index.html
Options: content="content.json", section=null, semanticIf=false, basePath="", transforms={}, parsePattern={}, variableParsePattern={}, removeUndefined
Reading content.json...OK
Parsing content.json...OK
Reading index.html...OK
Reading /includes/test.html...ERROR
Warning: Unable to read "/includes/test.html" file (Error code: ENOENT). Use --force to continue.
This is my gruntfile.js:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
},
bake: {
my_target: {
options: {
content: "content.json"
},
files: {
"dist/index.html": "index.html"
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks( "grunt-bake" );
// Default task(s).
grunt.registerTask('default', ['uglify', 'bake']);
};
What am I doing wrong. I just followed the docs from this link: https://www.npmjs.com/package/grunt-bake

It looks like grunt-bake has a bug with include path parsing if baking file is placed at root of folder. Try to put your index.html to some folder, like 'src/index.html' - this worked for me (after few hours wasted).
Source code of grunt-bake contains this line so it always put '/' to "include" file path - I guess this is why it does not work for files at root folder:
directory( filePath ) + "/" + includePath

Related

npm run build in tailwind css with multiple html pages

I run npm run build and dist folder was created but when I open that I not get my other html files and after run that it only showing simple html not included css and it not have my other files I connected to that like about.html contact.html
create input.css file in src folder then build npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
<link rel="stylesheet" href="./dist/output.css"> include about and contact html page then open
tailwind.config.js file and use
module.exports = {
content: ["./*.{html,js }" ],
theme: {
extend: {},
},
plugins: [],
}
or
module.exports = {
content: ["./contact.html", "about.html"],
theme: {
extend: {},
},
plugins: [],
}

Polymer 3.0.5 - "DOMException: Failed to execute 'define' on 'CustomElementRegistry'"

I don't think this is a duplicate issue. I only have #polymer/polymer installed as a dependency and imported into my vendor bundle (no #polymer/paper-input). I'm using v3.0.5 and I don't even see iron-meta in the dependency tree (via npm list) and my stack trace looks different - it points to polymer/lib/elements/dom-module.js
dom-module.js:178 Uncaught DOMException: Failed to execute 'define' on
'CustomElementRegistry': this name has already been used with this
registry
The trace points to this line customElements.define('dom-module', DomModule);
at #polymer/polymer/lib/elements/dom-module.js?:178:16
I'm attempting to setup a basic Polymer 3 project. I'm using Webpack with babel-loader to compile to es5. Because I'm compiling to es5, I'm including the custom-elements-es5-adapter.js along with webcomponents-bundle.js per instructions on the webcomponentsjs repo. Those scripts are simply copied from node_modules to the output directory and the script tags are included in the html head.
As for my component code, I'm creating separate js chunks for each polymer component as well as a separate chunk for shared imports which currently only includes Polymer. The compilation and code splitting works without error and the resulting chunks are added to the html before the closing body tag.
The Webpack SplitChunks plugin pulls the #polymer/polymer imports into the separate chunk so that they are only included once.
The goal is to have all required vendor code pulled into a common script and each component in a tiny chunk of it's own that can be selectively included.
my-common.js (shared/common chunk)
my-button.js (component chunk)
my-tabs.js (component chunk)
...more component chunks
With my current setup, the chunks appear to be created correctly.
In theory and based on what I've read so far, this should work but I'm completely stuck on this error.
If I bundle my component files together, everything works fine.
Here's an example of one of my very simple component files:
import { html, PolymerElement } from '#polymer/polymer';
export default class MyButton extends PolymerElement {
constructor() {
super();
}
static get template() {
return html`
<slot></slot>
`;
}
static get properties() {
return { }
}
}
customElements.define('my-button', MyButton);
Here is the webpack config I've created for this proof of concept:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SRC_PATH = path.resolve(__dirname, './src');
const DIST_PATH = path.resolve(__dirname, './dist');
module.exports = {
entry: {
'my-button': `${SRC_PATH}/js/components/my-button.js`,
'my-tabs': `${SRC_PATH}/js/components/my-tabs.js`
},
output: {
filename: 'js/[name].js',
path: DIST_PATH
},
resolve: {
extensions: ['.js']
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [[
'env',
{
targets: {
browsers: [
'last 2 versions',
'ie > 10'
]
},
debug: true
}
]]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: `${SRC_PATH}/index.html`,
filename: 'index.html',
inject: 'head'
}),
new CopyWebpackPlugin([{
from: './node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
to: 'js/vendor',
toType: 'dir'
}, {
from: './node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js',
to: 'js/vendor',
toType: 'dir'
}, {
from: './node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js',
to: 'js/vendor',
toType: 'dir'
}]),
new BundleAnalyzerPlugin()
],
optimization: {
splitChunks: {
cacheGroups: {
default: false,
commons: {
name: 'my-common',
chunks: 'all',
minChunks: 2
}
}
},
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
safari10: false,
compress: {
warnings: false,
drop_console: true
},
output: {
ascii_only: true,
beautify: false
}
}
})
]
},
devServer: {
contentBase: DIST_PATH,
compress: false,
overlay: {
errors: true
},
port: 8080,
host: '127.0.0.1'
}
};
And here's the html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer-3-sandbox</title>
<meta name="description" content="A polymer 3 sandbox">
<link rel="manifest" href="/manifest.json">
<script src="/js/vendor/webcomponents-bundle.js"></script>
<script src="/js/vendor/custom-elements-es5-adapter.js"></script>
<script type="text/javascript" src="js/my-common.js"></script>
<script type="text/javascript" src="js/my-button.js"></script>
<script type="text/javascript" src="js/my-tabs.js"></script>
</head>
<body>
<p>
<my-button>Learn More</my-button>
</p>
</body>
</html>
We have solved this problem with a nested polymer removal script, check the original github issue here.
The trick is to get npm to run a preinstall.sh script by adding the following to your package.json file :
"scripts": {
"preinstall": "../preinstall.sh"
}
Then run the following script which installs npm scriptlessly twice to get around install bugs :
#!/bin/bash
# Author: Flatmax developers
# Date : 2018 10 17
# License : free
npm i --ignore-scripts || true
if [ `ls node_modules/ | wc -l` -eq "0" ]; then
zenity --error --text="ERROR : cb() never called\nrm node_modules and pacakge-lock.json and try again"
fi
npm i --ignore-scripts || true
if [ `ls node_modules/ | wc -l` -eq "0" ]; then
zenity --error --text="ERROR : cb() never called\nrm node_modules and pacakge-lock.json and try again"
fi
. ../fixNestings.sh
Finally, the actual nestings removal script is like so :
#!/bin/bash
# Author: Flatmax developers
# Date : 2018 10 17
# License : free
# The following function will remove nested directories, where $1 exists like so
# node_modules/.*/node_modules/$1
# #param $1 the module name to remove nestings of
function rmNestedMod(){
name=$1
paths=`find -L node_modules -name $1 | sed "s|^node_modules/||;s|/\$name$||" | grep node_modules`
for p in $paths; do
echo rm -rf node_modules/$p/$name
rm -rf node_modules/$p/$name
done
}
# remove all nested polymer namespaces
namespaces=`ls node_modules/#polymer/`
for n in $namespaces; do
rmNestedMod "$n"
done

How to change default file watch options in LiteServer

So I'm trying to use LiteServer in my project, but I can't get it to change the default watch of index.html, my current file is index1.html. I specified app2.js as the entry point during npm init, so I was able to change the JS default, but not for HTML.
> lite-server
Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
** browser-sync config **
{ injectChanges: false,
files: [ './**/*.{html,htm,css,js}' ],
watchOptions: { ignored: 'node_modules' },
server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://10.40.244.189:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://10.40.244.189:3001
--------------------------------------
[BS] Serving files from: ./
[BS] Watching files...
16.12.21 18:43:32 200 GET /index.html
16.12.21 18:43:32 200 GET /style.css
16.12.21 18:43:33 200 GET /app2.js
16.12.21 18:43:34 404 GET /favicon.ico
I know the doc mentions the use of a bs-config.json file, but I couldn't get any reference which has the syntax for this.
Would appreciate the help!
UPDATE - I currently have this in the bs-config.json file, but no use -
{
"files": ["style.css", "app2.js", "index1.html"]
}
lite-server is based on BrowserSync. bs-config.js is browsersync's config file. The config options are documented here:
https://browsersync.io/docs/options
For example, to set your default indx to be index1.html, instead of setting it in your routes, the bs-config.json could contain:
{
"server": {
"baseDir": "src",
"index": "/index1.html",
"routes": {
"/node_modules": "node_modules"
}
}
}

Webpack runs Babel against PNG

Here is my webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: {
javascript: './static/jsx/main.jsx'
},
output: {
path: path.resolve('./static/js/app/'),
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'source-map'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader?limit=25000',
include: path.resolve('./static/images/')
}
]
},
};
Here is example of using png in a jsx file
import L from 'leaflet';
import { LayersControl, Marker, Popup } from 'react-leaflet';
const src = require('./marker-icon-red.png');
//Extend the Default marker class
let RedIcon = L.Icon.Default.extend({
options: {
iconUrl: src
}
});
let redIcon = new RedIcon();
When I run webpack for my jsx files (using gulp)
gulp.task('transform', function() {
return gulp.src(path.JS)
.pipe(webpack( require('./webpack.config.js') ))
.on('error', swallowError)
.pipe(gulp.dest(path.DEST_BUILD));
});
I get this error
[15:14:10] Starting 'transform'...
Error in plugin 'webpack-stream'
Message:
./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
# ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Version: webpack 1.13.2
Asset Size Chunks Chunk Names
bundle.js 1.48 MB 0 [emitted] javascript
ERROR in ./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
# ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Finished 'transform' after 11 s
As I understood it's babel tries to read png file, although I told webpack that png files should be treated by url-loader not babel.
What am I doing wrong?
Thanks for help!
Your url-loader config is set to only consider images from ./static/images, because of the include property:
{
test : /\.(jpg|png)$/,
loader : 'url-loader?limit=25000',
include : path.resolve('./static/images/')
}
However, the image you're trying to require is located in a different directory (./static/jsx/map/markers/).
If you remove the include, it'll probably work.
Renaming img1.PNG to img1.png solved it in my case.

TypeError: Handlebars.templates is undefined

I'm working with yeoman, gruntjs and handlebars.js, but my template don't load anymore with the following error in firebug:
TypeError: Handlebars.templates is undefined
var compiledTemplate = Handlebars.templates['cheatsheet.hbs'];
Handlebars.JS
In my package.json, I got:
"grunt-contrib-handlebars": "~0.5.9" // previously used ~0.5.8
Gruntjs tasks
Task: handlebars
I'm compiling .hbs to .hbs.js files:
handlebars: {
compile: {
options: {
namespace: 'JST'
},
files: {
'<%= yeoman.app %>/scripts/cheatsheet.hbs.js':
[ '<%= yeoman.app %>/templates/{,*/}*.hbs'] ,
}
}
},
Task: watch
I added the following in the watch section:
watch: {
// recompile handlebars' templates when they change
// #see: https://github.com/yeoman/yeoman/wiki/Handlebars-integration
handlebarsCompile: {
files: ['<%= yeoman.app %>/templates/{,*/}*.hbs'],
tasks: ['handlebars:compile']
},
handlebarsReload: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.hbs.js'],
tasks: ['livereload']
},
Tasks: grunt server and grunt build
I added the following entry to both task:
'handlebars:compile',
HTML file
I'm importing handlebars, the template and the script to inflate it:
<script src="components/handlebars.js/dist/handlebars.runtime.js"></script>
<script src="scripts/cheatsheet.hbs.js"></script>
<script src="scripts/main.js"></script>
Compiled template: cheatsheet.hbs.js
In the top lines, I got this:
this["JST"]["app/templates/cheatsheet.hbs"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
Template inflater: main.js
To inflate my compiled template I'm using this:
var compiledTemplate = Handlebars.templates['cheatsheet.hbs'];
Question
So what's the matter here Handlebars.templates array? Why is not created? How to create it?
More info
I created a gist to hold the full Gruntfile.js and cheatsheet.hbs.js.
After reading the section on precompiler usage:
If using the precompiler's normal mode, the resulting templates will
be stored to the Handlebars.templates object using the relative
template name sans the extension. These templates may be executed in
the same manner as templates.
I went on to debug the compiled template.
Debugging
Manual compilation
As I installed handlebars global, I can run compile templates manually. This wasn't enough, and I had to update the live file:
handlebars ./app/templates/cheatsheet.hbs -f ./app/scripts/cheatsheet.hbs.js # compile
cp ./app/scripts/cheatsheet.hbs.js ./.tmp/scripts/cheatsheet.hbs.js # update .tmp's template
Comparing with what grunt outputs
I saw that compiled template where different, the template reference doesn't occur in the same variable.
Manually compiled vs. Grunt compiled
- (function() {
- var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
- templates['cheatsheet.hbs'] = template(function (Handlebars,depth0,helpers,partials,data) {
+ this["JST"] = this["JST"] || {};
+
+ this["JST"]["cheatsheet.hbs"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
So I went to my task and saw
namespace: 'CHSH.Templates'
So I read the doc about namespace, and I wasn't using the right namespace in main.js
Solution
Step #1: Updating package
First globally:
sudo npm update handlebars -g
Then locally
bower update
I got some message about handlebars, but doesn't block:
Please note that
requires handlebars.js ~1.0.11
Resolved to handlebars.js v1.0.0, which matches the requirement
defined in the project's component.json. Conflicts may occur.
Step #2: Update Gruntfile.js
I set the namespace to CHSH.Templates (cf. doc about namespace) ;
I updated the files option to compile the *.hbs template from the app/templates directory to the .tmp/scripts/ and
app/scripts directories;
handlebars: {
compile: {
options: {
namespace: 'CHSH.Templates'
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>/templates',
src: '*.hbs',
dest: '<%= yeoman.app %>/scripts/',
ext: '.hbs.js'
},
{
expand: true,
cwd: '<%= yeoman.app %>/templates',
src: '*.hbs',
dest: '.tmp/scripts/',
ext: '.hbs.js'
}
]
}
}
I also edited to watch task to look after scripts/{,*/}*.js.
Step #3: Update main.js
Then I updated the namespace to match what I declared in my Gruntfile.js
- var compiledTemplate = Handlebars.templates['cheatsheet.hbs'];
+ var compiledTemplate = CHSH.Templates['app/templates/cheatsheet.hbs'];