Running JS minification as a maven goal? - javascript

I'm trying to use YUI compressor in a maven goal, but I'm pretty new to the inner workings of maven. I see that I can copy all js to a new directory with the following:
<copy todir="blah">
<fileset>
<!-- A bunch of file extension types -->
</fileset>
</copy>
Now, for each css and js file, I want to run the run the yui compressor and output the file to the final locations of the files copied above. Not that directory structure is maintained in the copy given above, so that may be something to consider when creating the maven goal.
Where do I start? I essentially need to run
java -jar yuicompressor input.js -o output.js
on all files. I'm restricted to maven 1.x, so where do I start? I want to make this a maven goal to avoid having to compress js by hand before a build, as that would be sloppy. If I could execute an external python/perl script to do this, that would be fine also, but I think that there is perhaps a better maveny way to do this.

Use YUI compressor ant task and follow the tutorial.
YUI ant task.

Related

SASS Output Style automate with minified file

I'm trying to do test to use correctly SASS and I want create a file style.css and that file minify to style.min.css
sass --watch sass/style:css --style compressed
That works well but I need automate proccess doing compile & minify at the same time.
I've found this code in other stackoverflow:
sass --watch sass/style.scss:css/style.css --watch css/style.css:css/style.min.css --style compressed --scss
but now dont work how I want that works.
Also at Sass webpage the code is different now on 2020.
https://sass-lang.com/documentation/cli/dart-sass#style
I'm not use gulp tool because I think it not neccesary for Wordpress projects.
Anybody may help me?
Irrespective of what you're building your site in, if you want total control over compilation/minification/whatever then well, that's what tooling such as gulp is there for.
It looks like you were trying to compile SCSS to CSS to a file, then take that compiled CSS file and minify it. That CLI tool won't do that, but it can absolutely do the compilation/compression at the same time, directly from the source SCSS.
Using the binary you're using, this is going to compile and compress, taking ./sass/style.scss and outputting the result to ./css/style.min.css
sass sass/style.scss:css/style.min.css --style compressed
Add --watch if you want to have it react to file changes in your scss file.
Or perhaps you were trying to get a unminified and a minified version alongside. In that case, you'll simply have to run two commands. Again, gulp is there to automate this process.
Other binaries will have different flags and options, and of course there is the gulp option which I'd certainly recommend given you then don't have to remember any lengthy commands and you can share your chosen structure/tasks accross projects.

Can Webstorm automatically include project js files in html, or merge them into one?

I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler

Have r.js optimizer create new index.html file that references built files?

When i use r.js to optimize my project, how do I get it to produce a single index.html file that includes only one script (my optimized script) and one css file (my optimized css)? Is this something I would need to write myself post build?
r.js don't include this option built-in. But with a full stack build tool, this will be achievable. I'd recommend grunt.js for this (you'll probably want to take a look at how to create custom grunt task for this though).

I am using the HTML5 Boilerplate and would like to combine multiple jQuery plugins in to one file: how can this be done?

I am using the HTML5 Boilerplate and would like to combine multiple jQuery plugins in to one file. If you could give me a code snippet to study I would greatly appreciate it.
I know this question has been pushed but on one ever show you how it is done.
Dose the YUI compressor that is used with the Yslow firebug plug-in a compressor for JQuery as well: dose it combine all JQuery plug-ins on a site and out put one nice .js file?
The build script has you covered. It concatenates and minifies all of the files in js/mylibs when you run it.
See more in the HTML5Boilerplate docs
I don't know if the YUI compressor does it by itself, but to compress all of my scripts as well as put them in a file, I use something similar to this in a shell script:
#!/bin/bash
cat jquery.js jquery.plugin1.js jquery.plugin2.js > all.js
# I prefer the closure compiler over YUI compressor.
closure-compiler --compilation_level SIMPLE_OPTIMIZATIONS --js all.js --js_output_file all.min.js
You have to combine the jQuery plugins manually into a single file, just copy and paste them one after the other.
You can use the Build Script that comes with HTML5 Boilerplate to minify the files further. Let me know if you need help doing this.

rhino-1.6R7.jar and jargs-1.0.jar in yuicompressor-2.4.2.zip

I have those two in the lib folder inside yuicompressor-2.4.2.zip. I ran the compressor completely fine without them. What are they for? Am I missing something?
Upon checking the dependency in yui source code it is clear that jargs class CmdLineParser is directly being used - and this dependency is also clear when one checks the ant build file lib path.
However, the lib folder is not used by the yui compressor jar itself - it is only used for compiling yui code. The actual yui compressor jar has all the contents of both the rhino and the jargs jar inside it - hence you can really just remove all the other contents of the folders and just use the yui compression jar directly.

Categories

Resources