How can I add a message to output files with Grunt.js? - javascript

I'm using grunt to compile coffeescript to javascript. I'd like to add a short comment to the top of the output js files that state they are generated files that should not be edited, perhaps listing what .coffee file it came from.

If you compile all your code into a single js file - you could use coffee's joining ability and join a file with your notice to the output.
If you compile each coffee script into a separate js file you could use the concat task
after the compilation and prepend each of the generated files with a file containing your notice.

Related

Webpack: require('index.html') vs just copying index.html

I'm fairly new to webpack.
From a YouTube tutorial (Academind) I watched, the guy teaches the user to include the HTML file in the entry .js file. From what I understand, webpack will then use HtmlWebpackPlugin to extract the required HTML file out, then inject either as a file or code into that HTML file. Is my understanding correct?
I'd like the above question answered, but that's not the main question. The main question is the reason for going through such pain.
Can't I just have the .html files copied to /dist and have each .html file have bundle1.js, bundle2.js, etc., in them?
That tutorial required html file because it was thought that it was easier to let webpack (HtmlWebpackPlugin) insert all the script tags for the bundles automatically, without having to do that manually.
You can also not require that, and add the template property on HtmlWebpackPlugin. That will do the same thing.
You can also copy to dist, of course. But that would require you to insert manually script tags on your html. That starts to get worst when you have hashes on your filenames.

Javascript code automated minification

I want to minify my existing javascript code and I want to achieve something like what we do for css preprocessors. We write in scss file and it gets converted into .css file on its own when the scss file is saved. Similary I want to achieve if I write in js file and save it ,the code gets minified and gets saved in minified file on its own.
Is there any way to achieve this kind of functionality ?
If you are using Atom, you need this package:
Atom Minify: https://atom.io/packages/atom-minify
If you are using Sublime, you need this package:
Minify on Save: https://packagecontrol.io/packages/Minify%20on%20Save
Both packages can minify on save!

Gulp - Inject js from one file into another without Browserify

Using gulp, what is a proper way to inject one js file into another?
I know about gulp-browserify, but that wraps each require'd file in it's own IIFE so variables are no longer global and, unfortunately, I need them to be global.
I know I can also concat all JS files into one, but I would like to generate separate JS files.
Is there a way to simply include the contents of one file within another where I can specify the concatenation in the JS file itself instead of in Gulp's configuration file?

Getting yeoman/usermin to uglify .kml file references

I am attempting to use yeoman to scafold a web site, my website includes references to files such as images/foo.kml
Running Grunt results in these files being filerev, i.e. the file images/foo.kml is copied to the dist directory but now called images/3333.foo.kml.
The only problem is that usermin task does not replace the references to images/foo.kml in the requested javascript file, but it does manage to process all the references to css and javascript files.
References to images, css and javascript files are normally listed by html tags, eg , etc. In my case I am making a programmtic request to a kml file which is used by a bit of add hock javascript, can usermin deal with type of problem? Or would I be better off putting all of the files that are going to be accessed by a javascript application in a different directory and ensure that references to these files are not subject to filerev?
Bottom line I was using OpenLayers to process the kml files, as the files are not used my img tags and only by a Java script program, the file name has to remain a constant. Since the uglify task has no concept of understanding a file name within a block of Javascript.
My solution was to change the grunt file so that my kml files are copied from the app to the dist directory.

Compiling CoffeeScript from Multiple Files

Im looking for a way to compile all of my coffeescript files, currently in individual files such as features.coffee // scroll.coffee etc etc, in to one main outputed .js file.
Im using an application.coffee file at current to act as the main file. Ive imported my various files using:
#= require features.coffee
#= require scroll.coffee
However when Im outputting the application.coffee to application.js on the code from within the application.coffee is outputting and not that of the imported files
Im assuming that coffeescript imports are not native features and that some sort of plugin will be needed
Thanks in advance
You have to manually merge the source files into a main script file ( aka concatenate them ), then compile to JavaScript. You have not specified what you are working with, but in node.js, the require function only executes an external script ( to put it very simply ), it does not place the source code into current file as you seem to be expecting.
There are many tools on the network to concatenate your source code into a single main script - just google around and find what suits you best.

Categories

Resources