bash - Recursively compress directory of javascript files into a single file - Stack Overflow

admin管理员组

文章数量:1336660

I would like be able to run a single mand in my project folder to concatenate and press all of my javascript files (perhaps with YUI Compressor) into a single output file.

If possible I would like to partially specify the order in which they are concatenated together but not have to keep track of every single javascript file. Perhaps a config file could be built which looks like this:

application.js
excanvas.js
json2.js
jquery*.js
flot/*
backbone*.js
app/screen-*.js
app/main.js
app/crud-*.js
app/*
*

Does anyone know of either an existing tool to do something like this, could whip together a bash/ruby/node/perl script, or even a better methodology? I'm building a Single Page App with heavy JS usage (~40 files) to be consumed by people with low bandwidth.

I would need the solution to be executable on my OS X development machine.

I would like be able to run a single mand in my project folder to concatenate and press all of my javascript files (perhaps with YUI Compressor) into a single output file.

If possible I would like to partially specify the order in which they are concatenated together but not have to keep track of every single javascript file. Perhaps a config file could be built which looks like this:

application.js
excanvas.js
json2.js
jquery*.js
flot/*
backbone*.js
app/screen-*.js
app/main.js
app/crud-*.js
app/*
*

Does anyone know of either an existing tool to do something like this, could whip together a bash/ruby/node/perl script, or even a better methodology? I'm building a Single Page App with heavy JS usage (~40 files) to be consumed by people with low bandwidth.

I would need the solution to be executable on my OS X development machine.

• javascript
• bash
• yui-pressor

Share Improve this question Follow asked Jan 29, 2012 at 0:14 Thomas Hunter IIThomas Hunter II 5,20177 gold badges3939 silver badges5656 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

find . -iname "*.js" -exec cat "{}" \; > singlefile.js
[JS pressor] singlefile.js

First concatenate the files, then press them.

If you really care, though, you may want a real JS optimizer like the RequireJS optimizer.

given a folder of javascript files:

geee: ~/src/bash/js-files
$ find . 
.
./application.js
./jquery-ui.js
./all-scripts.js
./cp.js
./excanvas.js
./backbone-worldwide.js
./jquery-plugin.js
./.found
./app
./app/crud-sel.js
./app/screen-detach.js
./app/aligator.js
./app/crud-in.js
./app/giraffe.js
./app/screen-attach.js
./app/main.js
./app/crud-del.js
./app/mouse.js
./app/monkey.js
./app/screen-shot.js
./backbone-national.js
./backbone23.js
./ummap.js
./CONFIG
./backbone-ibm.js
./ieee754.js
./flot
./flot/cow.js
./flot/moo.js
./flot/cat.js
./flot/bull.js
./flot/dog.js
./flot/sheep.js
./lines
./droiddraw-r1b21
./droiddraw-r1b21/._readme.txt
./droiddraw-r1b21/readme.js
./droiddraw-r1b21/LICENSE.js
./jquery-1.7.js
./ole.js
./touch
./json2.js
./xls2txt.js
./DO.sh
./backbone-isp.js

with a slightly modified configuration file:

geee: ~/src/bash/js-files
$ cat CONFIG 
application.js
excanvas.js
json2.js
jquery*.js
flot/*
backbone*.js
app/screen-*.js
app/main.js
app/crud-*.js
app/*js
*js

and this bash script:

$ cat DO.sh 
PROJECT=/home/jaroslav/src/bash/js-files        # top folder of the web-app 
SUPERJS=${PROJECT}/all-scripts.js
CONFIG=${PROJECT}/CONFIG                        # your the priority file (notice *js)
FOUND=${PROJECT}/.found                         # where to save results
JSMIN=$HOME/bin/jsmin                           # change to /usr/local/bin/jsmin or some other tool

echo > $FOUND                                   # remove results from previous run

if [ ! -x $JSMIN ]
then
        TMPJSMIN=/tmp/jsmin.c
        wget -q https://github./douglascrockford/JSMin/raw/master/jsmin.c -O $TMPJSMIN & FOR=$?
        echo "fetching jsmin (by Douglas Crockford) from github"
        wait $FOR 
        gcc -o $JSMIN $TMPJSMIN
fi




cat $CONFIG | \
        while read priority
        do 
                eval "find $priority|sort -n" | \
                        while read amatch;
                        do
                                grep -q $amatch $FOUND || echo $amatch >> $FOUND
                        done
        done
echo minifying: 
cat $FOUND
cat `cat $FOUND` | $JSMIN > $SUPERJS

you will find the "merged" script in all-scripts after runing the script:

geee: ~/src/bash/js-files
$ . DO.sh 
fetching jsmin (by Douglas Crockford) from github
[1]+  Done                    wget -q https://github./douglascrockford/JSMin/raw/master/jsmin.c -O $TMPJSMIN
minifying:

application.js
excanvas.js
json2.js
jquery-1.7.js
jquery-plugin.js
jquery-ui.js
flot/bull.js
flot/cat.js
flot/cow.js
flot/dog.js
flot/moo.js
flot/sheep.js
backbone23.js
backbone-ibm.js
backbone-isp.js
backbone-national.js
backbone-worldwide.js
app/screen-attach.js
app/screen-detach.js
app/screen-shot.js
app/main.js
app/crud-del.js
app/crud-in.js
app/crud-sel.js
app/aligator.js
app/giraffe.js
app/monkey.js
app/mouse.js
all-scripts.js
cp.js
ieee754.js
ole.js
ummap.js
xls2txt.js

---

Let me know if you need me to explain the script or if it fails on OS X.

The following script will follow the order of your config file and use the patterns given

#!/bin/bash

shopt -s nullglob;
while read config; do
  cat $config >> out.js
done < /path/to/config/file

I ended up building a solution which uses a json file to list all of the files required by the app. On the dev environment the files are individually loaded by the browser. On the production server, the big piled file is loaded. On my dev machine, I manually run a mand to iterate over each file, appending it to a big JS file and running YUI Compressor.

It's a little hacky, but here it is: https://github./renownedmedia/js-pressor

本文标签： bashRecursively compress directory of javascript files into a single fileStack Overflow