Создать инструмент: CoffeeScript / Node Project с несколькими компонентами
-
12-12-2019 - |
Вопрос
Я начинаю проект на работе и был задан вопросом, что будет наилучшим инструментом сборки.
Все это написано в CoffeeScript, используя AngularJS для клиентской стороны и NODEJS для сервера.
Есть несколько компонентов для приложения:
- .
- приложение iPad
- приложение для iPhone (другая функциональность от iPad)
- CMS для приложений
- nodejs сервер
Есть тонны общего кода между всеми этими, снова все написанные в CoffeeScript.
Я хотел бы, чтобы инструмент сборки, где я могу перечислить, какое приложение использует какой код (многое из него совместно), и он построит файлы JavaScript каждого приложения в отдельной папке.
Например, я бы настроил папку под названием «Compilet / iPad /», которая имеет index.html, а также папки для JS, CSS, IMG и т. Д. Я бы перечислил, какие скомпилированные файлы кофе я хочу бросить / компилировать / iPad / js (некоторые из него из /src/shared/*.coffee, некоторые из него из /src/ipad/*.Coffee и т. Д.) И какие файлы я хочу бросить / компилировать / iPad / CSS. Я хотел бы, чтобы это могло легко объединить файлы, как я тоже хочу.
Это также скомпилировало бы мои тесты, от / src / test / ipad в / compiced / test / iPad / *. js.
Все мои тесты на боковых клиентских модулях написаны с использованием testacular и я не уверен, что я ' пока напишу тесты на боковых объектах сервера.
Какой инструмент сборки / конфигурации здесь является лучшим подходом? Макияж? Что-то вроде хрунта? Я честно новичок в целой сцене сборки.
<Сильные> редактировать : решил пойти с браурией. Вы можете найти свое решение, чтобы сделать его работать с угловой частью: https:// группы. Google.com/forum/#!topic/angular/ytovaikoccs
Решение
Я бы поставил весь общий код в модули Node.js и создать проект, который выглядит что-то вроде следующего:
Project
|~apps/
| |~cms/
| | `-app.js
| |~ipad/
| | `-app.js
| |~iphone/
| | `-app.js
| `~node/
| `-app.js
|~libs/
| |-module.js
| `-module2.js
|~specs/
| |~cms/
| | `-app.js
| |~ipad/
| | `-app.js
| |~iphone/
| | `-app.js
| `~node/
| `-app.js
| `~libs/
| |-module.js
| `-module2.js
`-Makefile
.
Я бы тогда использовал что-то вроде браузерификации (есть другие), чтобы заставить клиентские приложения, где это необходимо.Таким образом вместо того, чтобы иметь файл сборки, где вы говорите, что вам нужно, у вас на самом деле есть настоящие приложения, импортирующие модули.
Другие советы
Лично я думаю, что диск для записи бокового кода сервера в JavaScript или CoffeeScript проходит также в вашу цепочку для инструментов сборки: Так что придерживайтесь с помощью JavaScript / CoffeeScript. Это позволит вам легко автоматизировать ваши задачи сервера / клиента из вашего инструмента сборки - я сомневаюсь, что это было значимо возможным с другим инструментом, как Make (вы просто будете писать обертки вокруг командных вызовов Node.js). Предложения, заказанные структурированными нессоми:
- .
- node.js : просто сверните сценарии сборки в JavaScript и вызывают их с узлом. Полагаю, сродни скрипты, я полагаю. Я не рекомендую этот маршрут.
- Джейк или Торт : Я из мира Java, так что не удивительно, что эти вроде напоминают мне о муравьеде. Я предпочитаю CoffeeScript, и, следовательно, предпочитаю торт.
- Grunt : Я не слышал об этом раньше, поэтому я не могу дать много советов. Это напоминает мне о Maven, конечно ... и я могу просто сказать ... Чем больше структурирует инструмент сборки, как правило, обеспечивает менее гибкое, что может быть. Это что-то от торговли. До тех пор, пока вы делаете это «инструмент сборки», как вы можете сохранить тонны времени. Но если у вас есть проблемы с приложением, это может быть одна королевская боль для разрешения.
Конечно, вы можете пойти с каким-либо другим инструментом сборки, с которым вы уже знакомы с какого-либо другого языка: грабли, Maven, Ant, Ridle, etc etc.
Я сделал почти это точное все в токе, используя модули узлов по мере необходимости.
Установите некоторые глобальные переменные, которые являются массивами с пути каждого файла, объединяют эти файлы в файл в скомпилированном каталоге, который вы указываете, а затем компилируйте, что один файл в JS.
Для стилей, то же самое с конкатенацией без компиляции, очевидно.
fs = require 'fs'
path = require 'path'
{spawn, exec} = require 'child_process'
parser = require('uglify-js').parser
uglify = require('uglify-js').uglify
cleanCss = require 'clean-css'
coffees =
[
"/src/shared/file1.coffee"
"/src/shared/file2.coffee"
"/src/ipad/file1.coffee"
]
tests =
[
"/src/ipad/tests.coffee"
]
styles =
[
"/src/ipad/styles1.css"
"/src/shared/styles2.css"
]
concatenate = (destinationFile, files, type) ->
newContents = new Array
remaining = files.length
for file, index in files then do (file, index) ->
fs.readFile file, 'utf8', (err, fileContents) ->
throw err if err
newContents[index] = fileContents
if --remaining is 0
fs.writeFile destinationFile, newContents.join '\n\n', 'utf8', (err) ->
throw err if err
if type is 'styles'
minifyCss fileName
else
compileCoffee fileName
compileCoffee = (file) ->
exec "coffee -c #{file}", (err) ->
throw err if err
# delete coffee file leaving only js
fs.unlink 'path/specifying/compiled_coffee', (err) ->
throw err if err
minifyJs file
minifyJs = (file) ->
fs.readFile f, 'utf8', (err, contents) ->
ast = parser.parse contents
ast = uglify.ast_mangle ast
ast = uglify.ast_squeeze ast
minified = uglify.gen_code ast
writeMinified file, minified
writeMinified = (file, contents) ->
fs.writeFile file, contents, 'utf8', (err) -> throw err if err
minifyCss = (file) ->
fs.readFile file, 'utf8', (err, contents) ->
throw err if err
minimized = cleanCss.process contents
clean = minimized.replace 'app/assets', ''
fs.writeFile file, clean, 'utf8', (err) ->
throw err if err
task 'compile_coffees', 'concat, compile, and minify coffees', ->
concatenate '/compiled/ipad/code.coffee', coffees, 'coffee'
task 'concat_styles', 'concat and minify styles', ->
concatenate '/compiled/ipad/css/styles.css', styles, 'styles'
task 'compile_tests', 'concat, compile, and minify test', ->
concatenate '/compiled/ipad/tests.coffee', tests, 'tests'
.
Теперь это примерно то, что я думаю, вы просите.
Обязательно может быть красивее, особенно имея отдельную функцию для написания рамированного содержимого, но это работает.
Не идеально подходит для стилей либо потому, что я использовал SASS и имел другие функции, прежде чем он попал в министерную функцию, но я думаю, что вы получите идею.