Vulcanize 1.14.7
I'm trying to use paper-dropdown-menu in a project. Using vulcanize on a components.html file which is imported into my index.html. Vulcanize correctly concatenates all the appropriate files except for the web-animations.js file. I get the following error in the browser console.
http://localhost:9005/bower_components/web-animations-js/web- animations-next-lite.min.js
Failed to load resource: the server responded with a status of 404 (Not Found)
This error originates from the vulcanized file.
<script src="../../bower_components/web-animations-js/web-animations-next-lite.min.js"></script>
just above the definition for opaque-animation
Polymer({
is: 'opaque-animation',
I am vulcanizing with gulp with the following config
gulp.task('web_components', () =>
gulp.src(config.paths.webComponentIndex)
.pipe(vulcanize({
abspath: config.paths.dist,
excludes: [],
inlineScripts: true,
stripExcludes: false
}))
.pipe(gulp.dest(config.paths.dist))
);
config.paths.dist is my dist directory and the webComponentIndex is of course the bundled output file which does bundle everything but this animation file correctly. If I understand this process correctly, that animations.js file should be concatenated along with everything else but it isn't doing it.
I had the same problem and solved it.
This problem occurs when vulcanize include bower_components\neon-animation\web-animations.html
And web-animations.html contains only one tag:
<script src="../web-animations-js/web-animations-next-lite.min.js"></script>
All you need is put parameter to your vulcanize when you run it from js inlineScripts or when you execute command --inline-scripts
This option will replace script tag by js file content. And it helps to include external sources to a bundle.
Are you sure that you have the web-animations-js folder in bower_components?
Related
I am struggling with a very strange issue with gulp build. I created a project using jhipster with angular 1. When I build the war for prod using mvn clean install -Pprod or just do gulp build, all my images files under content/images are copied properly to www/content/images. My HTML templates are minified and merged into 1 single app-f88bd0c8d7.js file under www/app folder. However, when I run the app and my index.html is opened, for few of the images I get 404 error even though those images are there in the war under content/images folder. The problem is with the name using which the images are being referred. For ex. my rev-manifest.json file under temp folder shows below entry - "fav-1.png": "fav-1-013b104b51.png", but this file is referred in my app-f88bd0c8d7.js as fav-1-013b104b51-57eab5e392.png, so if you notice its appending "-57eab5e392.png" extra. This happens only for few images(not same images, keeps on changing) every time I do gulp build.
I read quite a few forums on SO and went through open issues on git, but nowhere I see anyone facing this kind of issue. I tried below solutions but none worked:
1) Added a task for clearing gulp-cache as below and invoked it during gulp build -
var cache = require('gulp-cache');
gulp.task('clean', function () {
return del([config.dist], { dot: true });
});
gulp.task('build', ['clean'], function (cb) {
runSequence(['clearcache','copy', 'inject:vendor', 'ngconstant:prod', 'languages'], 'inject:app', 'inject:troubleshoot', 'assets:prod', cb);
});
2)Tried commenting out below lines :
a) .pipe(imagemin({optimizationLevel: 5, progressive: true, interlaced: true}))
b).pipe(rev())
c)gulp.watch(config.app + 'content/images/**', ['images']);
My jhipster version is 3.4.2 and gulp version is 3.9.1
Does anyone know why this might be happening?
Posting my comment as answer : I tried updating the git-rev version to 7.1.2 from 7.0.0 but it has same issue. So I just commented out .pipe(rev()) and it worked. No hashing of files happening now. Tried it last time as well, not sure why it didnt work. Anyways, it's working now. Will post the same as answer in case someone finds it useful.
Quick summary, I'm using #import "dir/**/*" to import around 100 or so _filename.scss. The underscore is important here.
If I use "#import "dir/specific_path/filename;" and add all the files individually, they work fine, everything compiles. But it won't work for whole directory.
However, If I rename my files filename.scss everything works perfectly, and the directory import works (note, just removing the underscore from the file name).
This could possibly be a bug with gulp-sass, but I want to make sure I am not missing some parameter or something. I could just rename the files, but I'd like to use the convention _filename.scss for files that are not meant to be used alone.
Sass task (gulpfile.js):
gulp.task('sass', function() {
return gulp.src('./source/css/pattern-global.scss')
.pipe(sourcemaps.init())
.pipe(sass({includePaths: ['./source/_patterns/']}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./source/css/patterns/'));
});
I'm working on the Drupal Pattern Lab site. But the directory structure does not matter much, since it's a matter of file names...
The file where I am calling #import:
#import "../_patterns/**/*";
The error I get when the file names are with an underscore:
Error in plugin 'sass'
Message:
source/css/pattern-global.scss
Error: File to import not found or unreadable: ../_patterns/**/*.
Parent style sheet: /Users/XXXXX/Sites/drupal_pattern_lab/source/css/pattern-global.scss
on line 5 of source/css/pattern-global.scss
#import "../_patterns/**/*";
^
Note: I went through a lot of the gulp-sass issues here, and I don't think there is one that matches my issue.
Summary: Keeping everything identical except the files that I am compiling renamed from _filename.scss to filename.scss and everything works. Or using #import on the specific file instead of directory also works fine.
Thanks
After scratching me head for a while I found this:
https://www.npmjs.com/package/gulp-sass-glob
gulp.task('sass', function() {
return gulp.src('./source/css/pattern-global.scss')
.pipe(sourcemaps.init())
.pipe(sassGlob()) //this was what I was missing
.pipe(sass({includePaths: ['./source/_patterns/']}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./source/css/patterns/'));
});
I used the following command to get crypto-js into my node_modules folder
npm install crypto-js
Then, after I had it downloaded, within my index.html file I use the following command so that I can call the CryptoJS.SHA256() method.
<html>
<head>
<script src="node_modules/crypto-js/sha256"></script>
</head>
</html>
(I left out the other script calls, meta and title tags)
However when I run my project using 'npm start', I get the following errors
What exactly does this mean? I am not sure how to solve something that is 'not found' even though it is where is should be. Am I maybe missing something else?
Your using external javascript that is not exposed to angular. Only the web dom is aware of the crypto js module. It looks like you just want to use SHA256. I would just implement a type script version of the function and go from there. Here is an example.
https://github.com/dchest/fast-sha256-js
I notice my files in polymer.json/fragments are not copied over to my build/bundled folder. This causes 404 errors, how can I resolve this?
Strangely they are copied for the unbundled folder ...
Seems like this is usually because there is some error in polymer.json. For example, when trying to include a file that does not exist. Unfortunately, Polymer does not fail with an error; it succeed with weird results ...
This is a bit of a weird one:
I've got a gulp task that looks like this:
gulp.task('less', function () {
gulp.src('./less/main.less')
.pipe(sourcemaps.init())
.pipe(less({
plugins: [cleancss]
}))
.pipe(sourcemaps.write()) // will write the source maps to ./public/assets/css-dist/maps
.pipe(gulp.dest(paths.public + 'css/dist'));
});
I'm running this task from inside a play 1.3 project, and it generates the base64-encoded inline sourcemap, as expected, but when I load it up in chrome, all of the styles are mapping to line 1 of main.css, indicating that something is wrong.
Now, here's where it gets weird: if I run this same task, pointing at copies of the same files, in another project with an identical directory structure, just running under plain-ol' apache, it works exactly as expected. The output files appear exactly the same.
Does anyone have any insight as to why this would be?
FWIW, an extremely similar scenario plays out when minifying and concatenating my js, using gulp-uglify and gulp-concat
Try see if you can visualize the difference/mappings via this visualizer tool. If both compiled files are exactly the same between the two projects then it's likely due to the different ways you are serving/accessing the files? With the 2nd project did you also try to view the sourcemap via Chrome?
Just to clarify, not only are you writing an inline sourcemap, you're also embedding your sources so everything is within the compiled .css file, the external original source files are not the referenced source(sourceRoot will be /source/).