Is there a way to generally NOT minify js files but DO minify a single concatenated version?
Basically here's the issue:
Large project with 100's of files.
During development we don't serve up minified js files as they don't add any benefit and just slow us down having to 'compile' a file every time you make a change.
However in production we concatenate the core framework files into a single minified and source mapped file.
Currently we do this using a 'Bundle' via WebEssentials in VisualStudio, the bundle is just an xml file listing the files to concat with attributes saying whether we want it minified and whether we want a source map generated. We also do the same thing with css files. Both are output into a 'release' folder.
in the current version, you can do the following
prepros ui >> right-click on project name >> Project Filters
add *.js to exclude all js files, if you want to minifiy a single file and exclude others, i think you need play with filters specified.
Related
I have a project that just consists of single HTML page, which includes several JavaScript and CSS files (at the moment via <include> and <style>).
For development including the individual files is quite nice.
My problem: for bundling a release, I would like to (automatically) bundle all scripts/css into one single HTML-file.
The build process (testing, code formatting, JSDoc generation) is implemented with Grunt.
Desired solution: I need a Grunt plugin (or something that can be integrated with Grunt) to "compile" the single HTML-file file.
Just for completeness (link to the project repo): https://github.com/dennisguse/TheKarte
I used grunt-assets-inline. (Link)
How does Webpack know which files to include in library build? How does it know which files should not or should be included, as in miscellaneous files like images, examples, documentation, etc. If it automatically includes them how do we make Webpack ignore these included files?
Webpack scans the actual JS files themselves, starting at your entry point(s) and recursively scanning each referenced file, to determine what to build. It won't include any other files like examples or documentation unless you for some reason are include/requiring them from your javascript.
Things like CSS/LESS/SASS and images are built with specific loaders which generally also only build referenced files.
TL;DR: If it isn't explicitly included somewhere, it probably isn't in the build.
Is it possible to generate a single sourcemap for an entire project using babel?
Because each sourcemap foe each file generates an ugly project structure.
The sourcemap format is explicitly per-file that the JS environment loads. It maps a source line/column location to a new filename and line/column number, but it is strictly one executed file to many original files. If you wanted to have a single sourcemap file with all the mappings for potentially many different output files generated from many input files, that would require a many-to-many relationship.
One option you might consider, if clutter during local development is your core concern, would be to use inline sourcemaps rather than separate files. Most sourcemap utilities support sourcemaps being appended to the JS file they are associated with as a comment containing a data URL.
Separate sourcemap files would still ideally be used if you have sourcemaps enabled in production however.
I am using Laravel with elixir to concatenate, minify and version all third party scripts into vendor-<elixir-version-hashid>.js. Everything works fine, but the problem is with internationalization. I added angular-i18n library to the project but it seems that it expects only one of language files to be loaded because all of them declare a module with the same name
angular.module("ngLocale", [],
but with my Elixir approach I get all of language files in my vendor.js file, which leads to conflicts because now ngLocale is redeclared for each locale js file.
What is the best approach to use angular-i18n together with minification? Should I create different vendor.js for each locale? Or should I leave locale files out of the minification process and instead use a custom gulp task to copy locale files to build folder? Any better approach?
Important - I don't need dynamic language change, my app always performs full page reload when user changes his preferred language. I just need some way to make angular see the correct ngLocale when all third party .js files are being compiled into single vendor.js file.
I wanted to create a javascript code library that will be eventually merged into one single minified code file. I was trying to search on how to be able to have these code files separated for development, but I could only find how to have a javascript file add a different javascript file to an existing html page. How do you separate javascript files for development only?
Develop each module of your library as separate .js files then setup a task running tool such as Grunt. You will need node.js along with npm to install Grunt.
You can then use the grunt-contrib-concat plugin to concatenate your javascript files together, and minify it using grunt-contrib-uglify.
These files are separately developed and combined into a single file generally known as minification and bundling, you could use asset compressor in Ruby on Rails in case you are developing in Ruby, otherwise pure javascript development uses Grunt based system, check UglifyJS.