PDF.js needs file named pdf.worker.js. That's fine if you include PDF.js into your HTML like <script type="text/javascript" src="plugins/pdfjs-dist/build/pdf.js"></script>
PDF.js will look in that very place where pdf.js is stored (in my case, plugins/pdfjs-dist/build/) for its worker file. However, in my case, I'd like to concatenate and minify all of my JavaScript dependencies into one file. (Via Grunt.)
How do I do that for that pdf.worker.js file? How can I include it into my one-and-only JS file?
So, far what I do in Grunt is
copy: {
build: {
files: [
{ src: 'src/plugins/pdfjs-dist/build/pdf.worker.js',
dest: 'dist/name_of_my_app.worker.js'
}
]
}
}
That works, but it's far from an elegant solution. Aside from looking ugly and the necessity of an additional file, there is a high chance that someone might rename name_of_my_app into something else, overlooking that copy process and thus breaking PDF.js
Related
So I've been searching a bit and it seems like using Delegate.SassBuilder is a good way to add SASS to your Blazor project. It detects any .scss files and builds them into .css files in the same directory.
It works as expected, however, I'm looking for more customization regarding "code behind" files, but with CSS files instead (not sure what the right term is except "code behind but for css"). By default, your Blazor application will contain files such as this:
So you have a .razor file, and then you have a .razor.css file. In index.html, it adds <link href="projectname.styles.css" rel="stylesheet" /> automatically, which handles these styles.
However, if I rename that .css file to .scss and build the application, I end up with this result:
It works, but I have to build it first, then run the application. Quite annoying. What's also annoying is that the files are no longer nested. I would like to see something like this instead:
What would be even better, is that the .css file is hidden and I just have to deal with the .scss files. I honestly don't care what the .css file contains, as it has been minified and so on.
There must be a better way, but I can't really find it.
Okay, so it seems like I have two options:
A) Create a .filenesting.json file and have this as the content as the extensionToExtension (might need to be modified a bit):
"extensionToExtension": {
"add": {
".razor.css": [ ".razor.scss" ],
".razor.css.map": [ ".razor.css" ],
".css": [ ".scss" ],
".razor.scss": [ ".razor" ],
".cs": [ ".cshtml", ".razor" ]
}
}
B) Somehow get <None Remove="**/*.razor.css" /> inside .csproj to work. As it is right now, the engine that handles CSS isolation does not look at excluded files.
For now I'll stick with option A, because that seems to work:
I found this super informative and useful article about globalization using angular's gettext directive and grunt. Problem is, it seems to extract from .html files only and I can't really get it running with jade.
I am using Node.js for my server, together with Express.js, so I convert my .jade files to .html files on the fly, on each user request. I really like the way express and jade fit together, so I am searching for a solution, which extracts translations from those jade files.
For now I tried changing the grunt task snippet to:
grunt.initConfig({
nggettext_extract: {
pot: {
files: {
'po/template.pot': ['**/*.jade']
}
}
}
});
And also adding the translation directive as I do for all other angular directives, e.g.:
h3(translate) About
To add jade file support to angular-gettext you would need to modify extract.js in the angular-gettext-tools project because that is what is actually scanning and extracting the text. It doesn't look like a trivial change.
I would suggest a different approach. See if you can generate html for all the jade files as part of a build process and then run the angular-gettext tools against that. Then you continue to develop as you like but you do not to need to add jade support to angular-gettext.
I haven't found anything that could help me. I need to minimize JavaScript code that is embedded in the html files inside tags . How can I do that?
Something like that returns obvious error:
uglify: {
dist: {
files: {
src: ['<%= yeoman.resources %>/views/{,*/}{,*/}{,*/}*.phtml']
}
}
}
I know it's not pretty solution to keep lot of JavaScript code in html, but I really need.
Big thanks for any help!
Adam,
IMO it does not work.
I don't know about your workflow, but it might be possible to place the content of the script tags into separate js files and use a grunt-plugin (or anything else) to inject the minified version into your templates.
My grunt script generated by yeoman concats and minifies js files through useminPrepare, concat, and uglifyjs.
This is working great, but there is one js script that I do not want it to minify. How do I specify that in the grunt file?
What you can do it's to put the files you don't want to minify outside of the build script, for example:
<!-- build:js js/app.js -->
<script src="js/app.js"></script>
<script src="js/minifythis.js"></script>
<script src="js/models/minifythis.js"></script>
<!-- endbuild -->
<script src="js/do-not-minify-this.js"></script>
I spent days looking for a solution to a problem similar to yours, and then I found a different question that has a answer that may fit solve your problem, as it solved mine: https://stackoverflow.com/a/24819171/785985
The solution is to define custom blocks to be processed by Grunt. Then you can specify one block with ['concat'] and another with ['concat', 'uglifyjs'].
If you choose to exclude the files from the minification tag per the item from John Locke, don't forget to manually copy those files to the 'dist' dir. Normally, when you minify files the resultant minified library is copied to the dist dir. But since you're not minifying them, you have to copy them yourself.
For example, I didn't want to compress the user scripts in my app to make it easier for people to examine the code online. After editing my 'index.html' to remove them from the tag:
'<!-- build:js({.tmp,app}) scripts/scripts.js -->'
I had to add the following to the copy step of my Gruntfile:
copy: {
dist: {
files: [
...
{ // manually copy all the files you are not minimizing:
expand: true,
cwd: '<%= yeoman.app %>/scripts/',
src:"{,*/}*.js",
dest:"<%= yeoman.dist %>/scripts/"
}
]
},
...
},
The syntax for copying files is very prickly in Grunt. It took me a couple of tries to get it right.
Just need to set a minimize option of that script to false in Gruntfile.js.
optimization: {
minimize: false
}
I'm working on a project using require.js and plan to optimize it using r.js. The optimization for javascript files is built in as part of the require configration automatically.
What I would like is to split the CSS into several different files, e.g. head.css, body.css, main.css, etc. When r.js runs, it should concatenate these into a single file. The HTML would have:
<link rel=stylesheet type=text/css href=css/main.css>
A problem is that during development, the files will still be split up. I'd like to keep them split and don't want to have to redo the optimization every time -- even if it can be done automatically.
I'd also like to be able to keep the HTML with just the one stylesheet reference even in development. What would be the optimal way to do this?
There are several possibilities that I can see, each with potential problems:
Have main.css use #import to include all other CSS files.
Not automatic -- have to edit main.css for each file. That's not a big deal since the number of files will be relatively small and probably all known very early on.
r.js does not optimize this
Use require-css
This seems to be geared more towards AMD loading of CSS -- I'd rather load all the CSS up front
Same issues with automatic loading of CSS files as the other option
Create my own script that calls r.js without CSS optimization, concatenate all of the CSS files and minify appropriately.
I'm sure there's someone out there who has done this better than I will
I use grunt-contrib-cssmin which works great. You can also pass arguments to grunt, so you can have grunt:dist combine all your css and plain grunt will leave them separate.
module.exports = function (grunt) {
grunt.initConfig({
cssmin: {
add_banner: {
options: {
banner: '/* My minified css file */'
},
files: {
'dist/css/dist.min.css': ["bower_components/bootstrap/dist/css/bootstrap.css", "tmp/css/dist.css"]
}
}
}
})
}
Grunt getting started.
There is also a requirejs script for grunt. The setup looks like this:
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
out: "path/to/optimized.js"
}
}
}