Рекурсивно сжимать каталог файлов javascript в один файл
Я хотел бы иметь возможность запускать одну команду в моей папке проекта, чтобы объединить и сжать все мои файлы javascript (возможно, с помощью компрессора YUI) в один выходной файл.
Если возможно, я хотел бы частично указать порядок, в котором они сцепляются вместе, но не должны отслеживать каждый файл JavaScript. Возможно, можно создать конфигурационный файл, который выглядит так:
application.js
excanvas.js
json2.js
jquery*.js
flot/*
backbone*.js
app/screen-*.js
app/main.js
app/crud-*.js
app/*
*
кто-нибудь знает о существующем инструменте для сделайте что-то вроде этого, может скрутить сценарий bash/ruby/node/perl или даже лучшую методологию? Я создаю одностраничное приложение с интенсивным использованием JS (~40 файлов), которое будет потребляться людьми с низкой пропускной способностью.
Мне нужно, чтобы решение было исполняемым на моей машине разработки OS X.
4 ответов
find . -iname "*.js" -exec cat "{}" \; > singlefile.js
[JS compressor] singlefile.js
сначала объедините файлы, затем сожмите их.
Если вы действительно заботитесь, хотя, вы можете захотеть реальный оптимизатор JS, как RequireJS optimizer.
учитывая папку с файлами javascript:
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
С немного измененным конфигурационным файлом:
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
и этот скрипт bash:
$ 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.com/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
вы найдете "объединенный" скрипт во всех сценариях после запуска скрипта:
geee: ~/src/bash/js-files
$ . DO.sh
fetching jsmin (by Douglas Crockford) from github
[1]+ Done wget -q https://github.com/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
Дайте мне знать, если вам нужно, чтобы я объяснил сценарий или если он не работает на OS X.
следующий скрипт будет следовать порядку вашего файла конфигурации и использовать заданные шаблоны
#!/bin/bash
shopt -s nullglob;
while read config; do
cat $config >> out.js
done < /path/to/config/file
Я закончил создание решения, которое использует файл json для списка всех файлов, необходимых для приложения. В среде dev файлы загружаются браузером по отдельности. На производственном сервере загружается большой скомпилированный файл. На моей dev-машине я вручную запускаю команду для итерации по каждому файлу, добавляя ее в большой JS-файл и запускаю компрессор YUI.
Это немного hacky, но вот это: https://github.com/renownedmedia/js-compressor