Showing preview only (577K chars total). Download the full file or copy to clipboard to get everything.
Repository: 2gis/tars
Branch: master
Commit: 75957b30ed10
Files: 262
Total size: 446.3 KB
Directory structure:
gitextract_x9whm8un/
├── .babelrc
├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── README_RU.md
├── appveyor.yml
├── docs/
│ ├── en/
│ │ ├── changelog.md
│ │ ├── css-concat-processing.md
│ │ ├── css-manual-processing.md
│ │ ├── css-processing.md
│ │ ├── faq.md
│ │ ├── file-structure.md
│ │ ├── fonts-and-misc.md
│ │ ├── handlebars-helpers.md
│ │ ├── html-processing.md
│ │ ├── images-processing.md
│ │ ├── js-concat-processing.md
│ │ ├── js-processing.md
│ │ ├── js-webpack-processing.md
│ │ ├── options.md
│ │ ├── plugins-options.md
│ │ ├── scenarios.md
│ │ ├── svg-processing.md
│ │ ├── tasks-and-watchers.md
│ │ ├── tasks.md
│ │ ├── update-guide.md
│ │ └── watchers.md
│ └── ru/
│ ├── changelog.md
│ ├── css-concat-processing.md
│ ├── css-manual-processing.md
│ ├── css-processing.md
│ ├── faq.md
│ ├── file-structure.md
│ ├── fonts-and-misc.md
│ ├── for-contributors.md
│ ├── handlebars-helpers.md
│ ├── html-processing.md
│ ├── images-processing.md
│ ├── js-concat-processing.md
│ ├── js-processing.md
│ ├── js-webpack-processing.md
│ ├── options.md
│ ├── plugins-options.md
│ ├── scenarios.md
│ ├── svg-processing.md
│ ├── tasks-and-watchers.md
│ ├── tasks.md
│ ├── update-guide.md
│ └── watchers.md
├── gulpfile.js
├── markup/
│ ├── components/
│ │ └── _template/
│ │ ├── _template.js
│ │ └── data/
│ │ └── data.js
│ └── static/
│ ├── js/
│ │ └── main.js
│ └── misc/
│ └── humans.txt
├── package.json
├── plugins-config.json
├── prettier.config.js
├── tars/
│ ├── helpers/
│ │ ├── filter-files-by-path.js
│ │ ├── get-templater-name.js
│ │ ├── install-additional-deps.js
│ │ ├── modify-date-formatter.js
│ │ ├── notifier.js
│ │ ├── plugins-config-processing.js
│ │ ├── set-build-version.js
│ │ ├── set-ulimit.js
│ │ ├── skip-task-with-empty-pipe.js
│ │ ├── start-screen-generator.js
│ │ ├── string-helper.js
│ │ ├── tars-fs-helper.js
│ │ └── watcher-log.js
│ ├── tars.js
│ ├── tasks/
│ │ ├── css/
│ │ │ ├── compile-css-for-ie8.js
│ │ │ ├── compile-css-for-ie9.js
│ │ │ ├── compile-css.js
│ │ │ ├── compress-css.js
│ │ │ ├── helpers/
│ │ │ │ ├── actions-on-sprite-task-skipping.js
│ │ │ │ ├── concat-compile-css-task-template.js
│ │ │ │ ├── manual-compile-css-task-template.js
│ │ │ │ └── sprite-mixins/
│ │ │ │ ├── less-raster-sprite-mixins.less
│ │ │ │ ├── less-svg-fallback-sprite-mixins.less
│ │ │ │ ├── less-svg-sprite-mixins.less
│ │ │ │ ├── scss-raster-sprite-mixins.scss
│ │ │ │ ├── scss-svg-fallback-sprite-mixins.scss
│ │ │ │ ├── scss-svg-sprite-mixins.scss
│ │ │ │ ├── stylus-raster-sprite-mixins.styl
│ │ │ │ ├── stylus-svg-fallback-sprite-mixins.styl
│ │ │ │ └── stylus-svg-sprite-mixins.styl
│ │ │ ├── make-fallback-for-svg.js
│ │ │ ├── make-sprite-for-svg.js
│ │ │ ├── make-sprite.js
│ │ │ └── move-separate.js
│ │ ├── html/
│ │ │ ├── compile-templates.js
│ │ │ ├── concat-mocks-data.js
│ │ │ ├── helpers/
│ │ │ │ ├── generate-static-path.js
│ │ │ │ ├── handlebars-helpers.js
│ │ │ │ ├── jade-helpers.js
│ │ │ │ ├── pages-and-data-files-processing.js
│ │ │ │ ├── pug-helpers.js
│ │ │ │ └── utils/
│ │ │ │ ├── dates.js
│ │ │ │ └── utils.js
│ │ │ └── modify-html.js
│ │ ├── images/
│ │ │ ├── helpers/
│ │ │ │ └── symbols-data-template.js
│ │ │ ├── make-symbols-sprite.js
│ │ │ ├── minify-images.js
│ │ │ ├── minify-svg.js
│ │ │ ├── move-content-img.js
│ │ │ ├── move-general-img.js
│ │ │ ├── move-plugins-img.js
│ │ │ └── raster-svg.js
│ │ ├── js/
│ │ │ ├── check.js
│ │ │ ├── concat-processing.js
│ │ │ ├── helpers/
│ │ │ │ └── separate-files-filter.js
│ │ │ ├── move-separate.js
│ │ │ ├── processing.js
│ │ │ └── webpack-processing.js
│ │ ├── main/
│ │ │ ├── build-dev.js
│ │ │ ├── build.js
│ │ │ ├── create-build.js
│ │ │ └── dev.js
│ │ ├── other/
│ │ │ ├── move-assets.js
│ │ │ ├── move-fonts.js
│ │ │ └── move-misc-files.js
│ │ └── services/
│ │ ├── clean.js
│ │ ├── create-fs.js
│ │ ├── init.js
│ │ ├── remove-init-fs.js
│ │ ├── update-deps.js
│ │ └── zip-build.js
│ ├── user-tasks/
│ │ ├── example-task.js
│ │ └── html/
│ │ └── helpers/
│ │ ├── handlebars-helpers.js
│ │ ├── jade-helpers.js
│ │ ├── modify-options.js
│ │ └── pug-helpers.js
│ ├── user-watchers/
│ │ └── example-watcher.js
│ └── watchers/
│ ├── css/
│ │ ├── common-css.js
│ │ ├── ie8-css.js
│ │ ├── ie9-css.js
│ │ └── modules-css.js
│ ├── js/
│ │ └── all.js
│ ├── move/
│ │ ├── assets.js
│ │ ├── content-img.js
│ │ ├── fonts.js
│ │ ├── general-img.js
│ │ ├── misc-files.js
│ │ ├── plugins-img.js
│ │ ├── separate-css.js
│ │ └── separate-js.js
│ ├── sprite/
│ │ ├── png-sprites.js
│ │ ├── svg-sprites.js
│ │ └── symbols.js
│ └── templates/
│ ├── data-files.js
│ └── page-modules.js
├── tars-config.js
├── tars.json
├── templates/
│ ├── handlebars/
│ │ └── markup/
│ │ ├── components/
│ │ │ ├── _template/
│ │ │ │ └── _template.html
│ │ │ ├── default_component_scheme.json
│ │ │ ├── example/
│ │ │ │ └── example.html
│ │ │ ├── footer/
│ │ │ │ └── footer.html
│ │ │ └── head/
│ │ │ ├── data/
│ │ │ │ └── data.js
│ │ │ └── head.html
│ │ └── pages/
│ │ ├── _template.html
│ │ └── index.html
│ ├── jade/
│ │ └── markup/
│ │ ├── components/
│ │ │ ├── _template/
│ │ │ │ └── _template.jade
│ │ │ ├── default_component_scheme.json
│ │ │ ├── example/
│ │ │ │ └── example.jade
│ │ │ ├── footer/
│ │ │ │ └── footer.jade
│ │ │ └── head/
│ │ │ ├── data/
│ │ │ │ └── data.js
│ │ │ └── head.jade
│ │ └── pages/
│ │ ├── _template.jade
│ │ └── index.jade
│ ├── less/
│ │ └── markup/
│ │ ├── components/
│ │ │ └── _template/
│ │ │ └── _template.less
│ │ └── static/
│ │ └── less/
│ │ ├── GUI.less
│ │ ├── common.less
│ │ ├── entry/
│ │ │ ├── built-in-partials/
│ │ │ │ ├── _service-ie8.less
│ │ │ │ └── _service.less
│ │ │ ├── ie/
│ │ │ │ ├── main_ie8.less
│ │ │ │ └── main_ie9.less
│ │ │ ├── main.less
│ │ │ └── partials/
│ │ │ ├── _components-ie8.less
│ │ │ ├── _components-ie9.less
│ │ │ ├── _components.less
│ │ │ ├── _libraries.less
│ │ │ └── _plugins.less
│ │ ├── etc/
│ │ │ └── etc.less
│ │ ├── fonts.less
│ │ ├── libraries/
│ │ │ └── library-sample.less
│ │ ├── mixins.less
│ │ ├── normalize.less
│ │ ├── plugins/
│ │ │ └── sample-plugin.less
│ │ ├── separate-css/
│ │ │ └── separate-css-sample.css
│ │ ├── sprite-generator-templates/
│ │ │ ├── less.sprite.mustache
│ │ │ ├── less.svg-fallback-sprite.mustache
│ │ │ └── less.svg-sprite.mustache
│ │ ├── sprites-less/
│ │ │ ├── sprite-png-ie.less
│ │ │ └── sprite-png.less
│ │ └── vars.less
│ ├── pug/
│ │ └── markup/
│ │ ├── components/
│ │ │ ├── _template/
│ │ │ │ └── _template.pug
│ │ │ ├── default_component_scheme.json
│ │ │ ├── example/
│ │ │ │ └── example.pug
│ │ │ ├── footer/
│ │ │ │ └── footer.pug
│ │ │ └── head/
│ │ │ ├── data/
│ │ │ │ └── data.js
│ │ │ └── head.pug
│ │ └── pages/
│ │ ├── _template.pug
│ │ └── index.pug
│ ├── scss/
│ │ └── markup/
│ │ ├── components/
│ │ │ └── _template/
│ │ │ └── _template.scss
│ │ └── static/
│ │ └── scss/
│ │ ├── GUI.scss
│ │ ├── common.scss
│ │ ├── entry/
│ │ │ ├── built-in-partials/
│ │ │ │ ├── _service-ie8.scss
│ │ │ │ └── _service.scss
│ │ │ ├── ie/
│ │ │ │ ├── main_ie8.scss
│ │ │ │ └── main_ie9.scss
│ │ │ ├── main.scss
│ │ │ └── partials/
│ │ │ ├── _components-ie8.scss
│ │ │ ├── _components-ie9.scss
│ │ │ ├── _components.scss
│ │ │ ├── _libraries.scss
│ │ │ └── _plugins.scss
│ │ ├── etc/
│ │ │ └── etc.scss
│ │ ├── fonts.scss
│ │ ├── libraries/
│ │ │ └── library-sample.scss
│ │ ├── mixins.scss
│ │ ├── normalize.scss
│ │ ├── plugins/
│ │ │ └── sample-plugin.scss
│ │ ├── separate-css/
│ │ │ └── separate-css-sample.css
│ │ ├── sprite-generator-templates/
│ │ │ ├── scss.sprite.mustache
│ │ │ ├── scss.svg-fallback-sprite.mustache
│ │ │ └── scss.svg-sprite.mustache
│ │ ├── sprites-scss/
│ │ │ └── sprite-ie.scss
│ │ └── vars.scss
│ └── stylus/
│ └── markup/
│ ├── components/
│ │ └── _template/
│ │ └── _template.styl
│ └── static/
│ └── stylus/
│ ├── GUI.styl
│ ├── common.styl
│ ├── entry/
│ │ ├── built-in-partials/
│ │ │ ├── _service-ie8.styl
│ │ │ └── _service.styl
│ │ ├── ie/
│ │ │ ├── main_ie8.styl
│ │ │ └── main_ie9.styl
│ │ ├── main.styl
│ │ └── partials/
│ │ ├── _components-ie8.styl
│ │ ├── _components-ie9.styl
│ │ ├── _components.styl
│ │ ├── _libraries.styl
│ │ └── _plugins.styl
│ ├── etc/
│ │ └── etc.styl
│ ├── fonts.styl
│ ├── libraries/
│ │ └── library-sample.styl
│ ├── mixins.styl
│ ├── normalize.styl
│ ├── plugins/
│ │ └── sample-plugin.styl
│ ├── separate-css/
│ │ └── separate-css-sample.css
│ ├── sprite-generator-templates/
│ │ ├── stylus.sprite.mustache
│ │ ├── stylus.svg-fallback-sprite.mustache
│ │ └── stylus.svg-sprite.mustache
│ ├── sprites-stylus/
│ │ ├── sprite-png-ie.styl
│ │ └── sprite-png.styl
│ └── vars.styl
├── user-package.json
└── webpack.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": ["@babel/preset-env"],
"ignore": [
"**/babel_ignore_*.js",
"*/js/framework/*.js",
"*/js/libraries/*.js",
"*/js/plugins/*.js",
"*/js/separate-js/*.js"
]
}
================================================
FILE: .browserslistrc
================================================
> 1%
last 2 versions
Firefox ESR
android 4
================================================
FILE: .editorconfig
================================================
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[node_modules/**.js]
codepaint = false
[package.json]
indent_style = space
indent_size = 2
================================================
FILE: .eslintignore
================================================
**/_*.js
plugins-config.json
================================================
FILE: .eslintrc
================================================
{
"root": true,
"env": {
"node": true,
"browser": true,
"commonjs": true,
"jquery": true,
"es6": true
},
"globals": {
"tars": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"rules": {
"indent": [2, 4, {"SwitchCase": 1}],
"brace-style": [2, "1tbs"],
"camelcase": [2, { "properties": "always" }],
"comma-spacing": [2, {"before": false, "after": true}],
"comma-style": [2, "last"],
"consistent-return": 0,
"curly": [2, "all"],
"default-case": 2,
"dot-notation": [2, { "allowKeywords": true }],
"eol-last": 2,
"eqeqeq": [2, "smart"],
"guard-for-in": 2,
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
"new-cap": 2,
"new-parens": 2,
"no-alert": 2,
"no-array-constructor": 2,
"no-caller": 2,
"no-debugger": 0,
"no-delete-var": 2,
"no-eval": 0,
"no-extra-bind": 2,
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-implied-eval": 2,
"no-invalid-this": 1,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": 2,
"no-lone-blocks": 2,
"no-loop-func": 1,
"no-mixed-spaces-and-tabs": [2, false],
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-native-reassign": 2,
"no-nested-ternary": 2,
"no-new-func": 2,
"no-new-object": 2,
"no-new-wrappers": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-process-exit": 2,
"no-proto": 2,
"no-redeclare": 2,
"no-return-assign": 2,
"no-script-url": 2,
"no-sequences": 2,
"no-shadow": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-trailing-spaces": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-undefined": 2,
"no-unused-expressions": 2,
"no-unused-vars": [1, {"vars": "all", "args": "after-used"}],
"no-use-before-define": 2,
"no-with": 2,
"quotes": [2, "single"],
"radix": 2,
"semi": [2, "always"],
"semi-spacing": [2, {"before": false, "after": true}],
"keyword-spacing": 2,
"space-before-blocks": [2, "always"],
"space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
"space-infix-ops": 2,
"space-unary-ops": [2, {"words": true, "nonwords": false}],
"spaced-comment": [2, "always", { "exceptions": ["-"]}],
"strict": 0,
"valid-jsdoc": [0, {"requireReturnDescription": false, "requireReturn": false}],
"wrap-iife": [2, "inside"],
"yoda": [2, "never"],
// Previously on by default in node environment
"no-catch-shadow": 0,
"no-console": 0,
"no-mixed-requires": 2,
"no-new-require": 2,
"no-path-concat": 2,
"global-strict": [0, "always"],
"handle-callback-err": [2, "err"],
// ES6
"arrow-spacing": [2, {"before": true, "after": true}],
"constructor-super": 2,
"no-confusing-arrow": 2,
"no-class-assign": 2,
"no-const-assign": 2,
"no-dupe-class-members": 2,
"no-this-before-super": 2,
"prefer-arrow-callback": 0,
"prefer-template": 0,
"require-yield": 2,
"no-var": 1
}
}
================================================
FILE: .gitignore
================================================
node_modules
dev
.DS_Store
._.DS_Store
.tmpTemplater
.tmpPreproc
.idea
npm-debug.log
phantomjsdriver.log
/nbproject/*
**/sprite_96.*
**/svg-fallback-sprite.*
**/svg-sprite.*
.vscode
================================================
FILE: .travis.yml
================================================
language: c
os:
- linux
- osx
env:
matrix:
- export NODE_VERSION="16"
matrix:
fast_finish: true
before_install:
- echo $TRAVIS_OS_NAME
- 'export TRAVIS_COMMIT_MSG="$(git log --format=%B --no-merges -n 1)"'
- export START_FULL_TESTS=$(echo $TRAVIS_COMMIT_MSG | grep '\[full\]' -c)
- if [ ${START_FULL_TESTS} = "1" ]; then echo "FULL TESTS!"; fi
- git clone https://github.com/creationix/nvm.git ./.nvm
- source ./.nvm/nvm.sh
- nvm install $NODE_VERSION
- nvm use $NODE_VERSION
before_script:
- npm -v
- npm install
- npm install -g gulp
script:
- gulp init
- gulp --release --ie
================================================
FILE: LICENSE
================================================
The MIT License (MIT)
Copyright (c) 2014-2016, Malko Artem <artem.malko@gmail.com>, <tars.builder@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="right">
English description | <a href="README_RU.md">Описание на русском</a>
</p>
# Maintainer is needed!
# 
[![Downloads][downloads-image]][npm-url] [](https://travis-ci.org/tars/tars) [](https://ci.appveyor.com/project/artem-malko/tars/branch/master) [](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
TARS is a builder for modern frontend of any complexity, which is based on [Gulp.js](http://gulpjs.com/). It facilitates and accelerates process of web-development. TARS will be suitable for teams and individual developers. It solves the most routine cases associated with web-development and brings you more pleasure from work.
TARS is a framework for gulp, including a set of gulp-tasks. It allows for easy expansion (creating new tasks) and customization (modification of existing tasks), provides comfortable architecture for tasks and watchers storage in the project.
To bypass dependencies installation for every TARS project, [TARS-CLI](https://github.com/tars/tars-cli) was created. As such, TARS is not a npm-package by itself. This decision was made so that everyone could comfortably customize the builder for themselves. TARS-CLI is just a simple builder interface, which includes all dependencies for TARS.
**It is strongly recommended to use TARS-CLI for development.**
You can install TARS-CLI via NPM. More info in [project's repository](https://github.com/tars/tars-cli).
**Attention! All docs from branch "master" are written for the last version of TARS. If you have another version of TARS, please, open appropriate release and take docs from there. Besides, you have all docs, which are 100% compatible with your project in the root folder of your project!**
## Basic features
Listed below are just a little part of the features. In fact builder has much more.
* [Jade](http://jade-lang.com/), [Pug](https://pugjs.org/api/getting-started.html) or [Handlebars](http://handlebarsjs.com/) as html templater. You can also use a regular html. Read more [in docs](/docs/en/html-processing.md).
* [Webpack](https://webpack.github.io) (with [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html)) or simple JavaScript code concatenation into one bundle.
* Using json (js-object actually, which can be described in json) to transfer data in templates (optional, but it is a very cool thing that will let you get rid of copypaste). Read more [in docs](/docs/en/html-processing.md#%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F%D0%BC%D0%B8-%D0%B8-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8-%D0%B2-handlebars).
* [TARS-CLI](https://github.com/tars/tars-cli) and **auto update of your project**.
* You can use ES6 (and some experimental features from ES7) right now. [More info](/docs/en/js-processing.md).
* [SCSS (SASS)](http://sass-lang.com/), [LESS](http://www.lesscss.org/) or [Stylus](http://learnboost.github.io/stylus/) as a preprocessor for css. Also it includes a small set of mixins. Sourcemaps are included. You can use .scss and .sass extension then scss is selected as preprocessor. You can use .scss and .sass files together. Read more [in docs](/docs/en/css-processing.md). [PostCSS](https://github.com/postcss/postcss) with [autoprefixer](https://github.com/postcss/autoprefixer) is supported by default and it is really easy [to use additional plugins for PostCSS](/docs/en/options.md#postcss).
* No external libraries or plugins (except [html5shiv](https://ru.wikipedia.org/wiki/Html5_Shiv)). Yes, this is a feature because you can choose which library to use. Sourcemaps for JavaScript are included.
* [Chokidar](https://github.com/paulmillr/chokidar) module is used to watch files
* Optional markup sharing from your local computer to the world. And of course it has livereload in browser (and not just locally) + GUI control panel for devices, to which markup is shared.
* [You can easily add new tasks and watchers](/docs/en/tasks-and-watchers.md). There are several examples of how to create and use a new task or watcher inside the TARS. Thereby, it is really easy to add any task from your builder to TARS or integrate TARS into your project.
* Smart work with images. First of all with vector (svg). There will be no more hell with markup for screens with high pixel density. TARS supports two workflows of working with SVG: [SVG-sprites](docs/en/svg-processing.md#svg-sprites) and [SVG-symbols](docs/en/svg-processing.md#svg-symbols).
* Several modes of assembly (common, with minified files, with hash in the title of css and js files for deployment).
* Creating archive with a complete build.
## Documentation
It is important! All examples in documentation use the default settings.
* [File structure](/docs/en/file-structure.md)
* [Working with tasks and watchers](/docs/en/tasks-and-watchers.md)
* [TARS Options](/docs/en/options.md)
* [Plugins configuration](/docs/en/plugins-options.md)
* [Html](/docs/en/html-processing.md)
* [Css](/docs/en/css-processing.md)
* [Js](/docs/en/js-processing.md)
* [Working with images](/docs/en/images-processing.md)
* [Working with fonts and misc-files](/docs/en/fonts-and-misc.md)
* [Usage script (scenarios)](/docs/en/scenarios.md)
* [Upgrade guide](/docs/en/update-guide.md)
* [FAQ](/docs/en/faq.md)
## Installation
**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferred
way to work with TARS. It is faster and more comfortable to work with TARS-CLI. In case of using TARS with TARS-CLI all installation steps are not necessary!**
You need to [install `Node.js`](http://nodejs.org/) with version equal to 4.x.x and higher. If you use Node.js version 5.x.x, please, make sure, that you use npm version 3.x.x and higher. Otherwise update npm by using command:
```bash
npm i -g npm
```
For Windows you have to do some more steps:
* navigate to C:\Program Files (x86)\nodejs or C:\Program Files\nodejs via cmd.exe or any available terminal. The path depends on how Node.js was installed;
* run command `npm install npm@latest`.
If you get a **Permission denied** or **Error: EACCES** error, you should run the previous command again in sudo (as Administrator for Windows).
Next you need to install gulp globally. (You may need rights of superuser or administrator).
```shell
npm install -g gulp
```
[Download TARS](../../../tars/archive/master.zip) and unzip it in the working directory. Then install dependencies. Command is run from a folder with TARS files (usually it is a tars-master).
```shell
npm install
```
If not all of the dependencies have been installed, the last operation must be repeated.
After installing of all dependencies you need to open tars-config (detailed description of the options are [here](/docs/en/options.md)) and set up the project for yourself. In that config file, you can select the templater, css-preprocessor, using the notifications, folder names for different static and etc. After setting up the project, execute the following command:
```shell
gulp init
```
**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferred
way to work with TARS. It is faster and more comfortable to work with TARS-CLI. [Init command is available in TARS-CLI too](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-init).**
This command will create the basic file structure, download tasks for selected templater and css-preprocessor.
Everything is ready, get to work! :)
## Basic commands
**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferred
way to work with TARS. It is faster and more comfortable to work with TARS-CLI. All commands are available and [described in TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md), so use only TARS-CLI for working with your project. TARS used Gulp to start tasks, when CLI was not created.**
`gulp init` — initializes project with the specified settings in the tars-config. Creates a file structure.
`gulp re-init` — **This command is deprecated!** reinitialize the project with specified settings in the tars-config. It is advised to use this command if you initialize the project with incorrect options. **Attention, files from pages and static folder will be deleted.**
`gulp` or `gulp build` — build project. Non-minimized files are used by default. Build type depends on command parameters.
Available parameters:
* `--min` – minimized files are connected to html.
* `--release` – minimized files are connected to html whose names have hash. This mode is useful if you are trying to directly deploy ready markup to the server.
`gulp dev` — initialize of builder in development mode. Dev-version of the project is created without any minifications. It also launches watchers for project files.
Available parameters:
* `--lr` – initialize livereload (live page reloads with changes in project files), if it is included in the configuration of the project.
* `--tunnel` – initialize project with markup sharing to the external web.
The link will be shown in the console. There also will be a link to the control panel for devices to which markup is shared.
`gulp build-dev` — generation of dev-version of the project without watchers.
These parameters are available in any mode of assembly:
* `--ie8` – to include in the build styles for ie8.
* `--ie9` – to include in the build styles for ie9.
* `--ie` – to include in the build styles for ie8 and ie9.
## Documentation
It is important! All examples in documentation use the default settings.
* [File structure](/docs/en/file-structure.md)
* [Working with tasks and watchers](/docs/en/tasks-and-watchers.md)
* [TARS Options](/docs/en/options.md)
* [Plugins configuration](/docs/en/plugins-options.md)
* [Html](/docs/en/html-processing.md)
* [Css](/docs/en/css-processing.md)
* [Js](/docs/en/js-processing.md)
* [Working with images](/docs/en/images-processing.md)
* [Working with fonts and misc-files](/docs/en/fonts-and-misc.md)
* [Usage script (scenarios)](/docs/en/scenarios.md)
* [Upgrade guide](/docs/en/update-guide.md)
* [FAQ](/docs/en/faq.md)
## Last changes
All recent changes are available here: [changelog](/docs/en/changelog.md).
If you have a question you can write in [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) or mail [tars.builder@gmail.com](mailto:tars.builder@gmail.com)
Bugs and feature-request here: [issues](https://github.com/tars/tars/issues/new).
[downloads-image]: http://img.shields.io/npm/dm/tars-cli.svg?style=flat-square
[npm-url]: https://npmjs.org/package/tars-cli
================================================
FILE: README_RU.md
================================================
<p align="right">
<a href="README.md">English description</a> | Описание на русском
</p>
# Ищем Maintainer'ов
# 
[![Downloads][downloads-image]][npm-url] [](https://travis-ci.org/tars/tars) [](https://ci.appveyor.com/project/artem-malko/tars/branch/master) [](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
TARS — сборщик frontend'а любой сложности, основанный на [Gulp](http://gulpjs.com/). Облегчает и ускоряет процесс разработки веб-сайтов/приложений, делая работу приятной и продуктивной.
Подойдет как командам, так и отдельному разработчику. TARS решает большинство рутинных дел, связанных с веб-разработкой, чтобы вы получали больше удовольствия от работы.
TARS — сборщик-фреймворк, включающий в себя набор gulp-тасков, предоставляющий возможность легкого расширения (создания новых тасков) и модифицирования уже существующих, предоставляет удобную архитектуру хранения тасков и вотчеров в проекте.
Для того, чтобы не скачивать и не ставить все пакеты для TARS каждый раз, был создан [TARS-CLI](https://github.com/tars/tars-cli). Сам TARS — не npm-пакет. Такое решение было принято, чтобы каждый мог максимально комфортно кастомизировать сборщик под себя. CLI — просто удобный интерфейс над сборщиком, который содержит в себе все зависимости для TARS.
**Желательно пользоваться именно CLI-версией для разработки.**
Вы можете установить TARS-CLI через npm. Больше информации в [репозитории проекта](https://github.com/tars/tars-cli).
**Обратите внимание, документация, которая находится в ветке «master» соответствует последней версии TARS. Если у вас используется другая версия, прошу открыть соответствующий релиз и смотреть документацию там! Кроме того, в корневой папке вашего проекта всегда есть папка с документацией, которая на 100% подходит к используемой версии TARS!**
## Основные фичи
Ниже перечислена только малая часть особенностей, на самом деле их гораздо больше)
* [Jade](http://jade-lang.com/), [Pug](https://pugjs.org/api/getting-started.html) или [Handlebars](http://handlebarsjs.com/) на выбор в качестве html-шаблонизатора. Также можно использовать обычный html. Подробности [здесь](/docs/ru/html-processing.md).
* [Webpack](https://webpack.github.io) (вместе с [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html)) или простая конкатинация JavaScript-кода в один файл.
* Использование json (а точнее js-объекта, который может быть описан в json) для передачи данных в шаблоны (опционально, но очень крутая штука, которая позволит избавиться от копипаста). Подробнее [тут](/docs/ru/html-processing.md#%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F%D0%BC%D0%B8-%D0%B8-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8-%D0%B2-handlebars).
* [CLI-утилита](https://github.com/tars/tars-cli) и **автообновление проекта**.
* Вы можете ипользовать ES6 (и некоторые фичи из ES7) уже сегодня. Подробнее в [документации](/docs/ru/js-processing.md).
* [SCSS (SASS)](http://sass-lang.com/), [LESS](http://www.lesscss.org/) или [Stylus](http://learnboost.github.io/stylus/) в качестве препроцессора для css. Также в комплекте идет небольшой набор миксинов. Доступны sourcemaps. При выборе scss в качестве препроцессора, вы можете использовать как расширение scss, так и sass + можете миксовать их использование. Подробности [здесь](/docs/ru/css-processing.md). В комплекте идет [PostCSS](https://github.com/postcss/postcss) с [autoprefixer'ом](https://github.com/postcss/autoprefixer). Также очень [легко подключить дополнительные плагины для PostCSS](/docs/ru/options.md#postcss).
* Никаких внешних библиотек и плагинов (кроме [html5shiv](https://ru.wikipedia.org/wiki/Html5_Shiv)). И да, это фича, так как вы вольны сами выбирать, какие библиотеки использовать. Доступны sourcemaps для JavaScript.
* Используется модуль [chokidar](https://github.com/paulmillr/chokidar) для вотчинга файлов.
* Расшариванием верстки с вашего компьютера во внешний веб, опционально. Ну и конечно же livereload в браузере (и не только локально) + графический интерфейс к панели управления устройствами, на которые расшаривается верстка.
* [Можно легко добавлять новые таски и вотчеры](/docs/ru/tasks-and-watchers.md). Есть примеры того, как создать и использовать новый таск или вотчер внутри TARS. Это позволяет действительно легко интегрировать TARS в ваш проект или таски из вашего проекта в TARS.
* Умная работа с изображениями. В первую очередь с вектором (svg). Больше не будет ада при верстке сайтов для экранов с высокой плотностью пикселей. Для работы с SVG поддерживаются два подхода: [SVG-спрайты](docs/en/svg-processing.md#svg-спрайты) и [SVG-symbols](docs/ru/svg-processing.md#svg-symbols).
* Несколько режимов сборки (обычная, с минифицированными файлами, с хешем в названии css- и js-файлов для выкладки в продакшн).
* Создание архива с готовой сборкой.
В 2015 году я выступал с докладом о TARS на конференции DUMP. Можно ознакомиться с [видео с выступления](http://www.youtube.com/watch?v=JZ3thYdmQ3E&index=2&list=PLRdS-n5seLRrvvG0yU3uoYPKQDXvVW2nn), на котором рассказывается об одной из первых версий TARS, но оно все еще актуально.
## Документация
Важно! Все примеры в документации используют настройки по умолчанию.
* [Файловая структура](/docs/ru/file-structure.md)
* [Работа с тасками и вотчерами](/docs/ru/tasks-and-watchers.md)
* [Опции TARS](/docs/ru/options.md)
* [Конфигурирование плагинов](/docs/ru/plugins-options.md)
* [Html](/docs/ru/html-processing.md)
* [Css](/docs/ru/css-processing.md)
* [Js](/docs/ru/js-processing.md)
* [Работа с изображениями](/docs/ru/images-processing.md)
* [Работа со шрифтами и misc-файлами](/docs/ru/fonts-and-misc.md)
* [Сценарии использования](/docs/ru/scenarios.md)
* [Руководство по обновлению](/docs/ru/update-guide.md)
* [Руководство для контрибуторов](/docs/ru/for-contributors.md)
* [FAQ](/docs/ru/faq.md)
## Установка
**Обращаем ваше внимание, что предпочтительно использовать [TARS-CLI](https://github.com/tars/tars-cli). Это удобнее, нагляднее, занимает меньше места. При работе с TARS через TARS-CLI, все дальнейшие шаги по установке не требуются!**
Необходимо [установить `Node.js`](http://nodejs.org/) версии >= 4.x.x Если вы используете Node.js версии 5.x.x, убедитесь, что вы используете npm версии 3.x.x и выше. В противном случае обновите npm:
```bash
npm i -g npm
```
Пользователям Windows необходимо выполнить еще пару шагов:
* перейти в C:\Program Files (x86)\nodejs или C:\Program Files\nodejs в cmd.exe или в любом другом терминале. Путь зависит от того, куда Node.js был установлен;
* запустите команду `npm install npm@latest`.
Возможно потребуются права суперюзера.
Далее необходимо установить gulp глобально. (Возможно потребуются права суперюзера или администратора)
```shell
npm install -g gulp
```
[Скачайте TARS](../../../tars/archive/master.zip) и распакуйте в рабочую директорию у себя на компьютере.
Затем устанавливаем зависимости. Команда запускается из папки с файлами TARS (обычно это tars-master).
```shell
npm install
```
Если не все зависимости были установлены, то последнюю операцию нужно повторить.
После установки всех зависимостей необходимо открыть tars-config (подробное описание опций [здесь](/docs/ru/options.md)) и настроить проект под себя.
В конфиге вы можете выбрать шаблонизатор, css-препроцессор, использование уведомлений, имена папок для различной статики и т.д.
После настройки проекта, выполняем следующую команду:
```shell
gulp init
```
**Обращаем ваше внимание, что предпочтительно использовать [TARS-CLI](https://github.com/tars/tars-cli). [Команда инициализации доступна в TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-init).**
Данная команда создаст базовую файловую структуру, подтянет таски для выбранных вами шаблонизатора и css-препроцессора.
Все готово, можно колбасить :)
## Основные команды
**Обращаем ваше внимание, что предпочтительно использовать [TARS-CLI](https://github.com/tars/tars-cli). Это удобнее, нагляднее, занимает меньше места! Все команды, описанные ниже, [доступны в TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md), используйте именно его для работы над проектом. TARS запускался через Gulp, когда не было CLI.**
`gulp init` — Инициализирует проект с заданными опциями в tars-config. Создает файловую структуру.
`gulp re-init` — **команда будет удалена в одном из следующих релизов** Переинициализирует проект с заданными опциями в tars-config. Предлагается использовать данную команду, если вы инициализировали проект с неверными опциями. **Внимание, при переинициализации все папки и файлы удаляются.**
`gulp` или `gulp build` — делает сборку проекта. Подключаются не минимизированные файлы. Тип сборки зависит от переданных ключей вместе с этой командой. Доступные ключи:
* `--min` – в html подключаются минимизированные файлы.
* `--release` – в html подключаются минимизированные файлы, в названии которых есть hash. Данный режим полезен, если вы напрямую выкладываете верстку на сервер.
`gulp dev` — инициализация сборщика в режиме разработки. Создается dev-версия проекта, без всех минификаций. Также запускает вотчеры за файлами проекта. Доступные ключи:
* `--lr` – инициализация livereload (живая презагрузка страницы при изменениях в файлах проекта), если он включен в конфиге проекта.
* `--tunnel` – инициализация проекта с расшариванием верстки во внешний веб.
Ссылка будет указана в консоли. Также будет указана ссылка на панель управления устройствами, на которые расшарена верстка.
`gulp build-dev` — генерация dev-версии проекта без вотчеров.
Ключи, доступные при любом режиме сборки:
* `--ie8` – включить в сборку стили для ie8.
* `--ie9` – включить в сборку стили для ie9.
* `--ie` – включить в сборку стили для ie9 и ie8.
## Документация
Важно! Все примеры в документации используют настройки по умолчанию.
* [Файловая структура](/docs/ru/file-structure.md)
* [Работа с тасками и вотчерами](/docs/ru/tasks-and-watchers.md)
* [Опции TARS](/docs/ru/options.md)
* [Конфигурирование плагинов](/docs/ru/plugins-options.md)
* [Html](/docs/ru/html-processing.md)
* [Css](/docs/ru/css-processing.md)
* [Js](/docs/ru/js-processing.md)
* [Работа с изображениями](/docs/ru/images-processing.md)
* [Работа со шрифтами и misc-файлами](/docs/ru/fonts-and-misc.md)
* [Сценарии использования](/docs/ru/scenarios.md)
* [Руководство по обновлению](/docs/ru/update-guide.md)
* [Руководство для контрибуторов](/docs/ru/for-contributors.md)
* [FAQ](/docs/ru/faq.md)
## Последние изменения
Все последние изменения доступны по ссылке: [История изменений](/docs/ru/changelog.md).
По всем вопросам можно писать в [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) или на почту [tars.builder@gmail.com](mailto:tars.builder@gmail.com)
Баги и фича-реквесты сюда: [issues](https://github.com/tars/tars/issues/new).
[downloads-image]: http://img.shields.io/npm/dm/tars-cli.svg?style=flat-square
[npm-url]: https://npmjs.org/package/tars-cli
================================================
FILE: appveyor.yml
================================================
# AppVeyor file
# http://www.appveyor.com/docs/appveyor-yml
# Build version format
version: '{build}'
platform:
- x64
- x86
clone_depth: 10
# Fix line endings on Windows
init:
- git config --global core.autocrlf true
# What combinations to test
environment:
matrix:
- nodejs_version: 16
install:
- ps: Install-Product node $env:nodejs_version $env:platform
- node --version
- npm install -g npm
- npm --version
- npm install -g gulp
- npm install
build: off
build_script:
- gulp init
test_script:
- cmd: gulp build --release --ie
================================================
FILE: docs/en/changelog.md
================================================
<p align="right">
English description | <a href="../ru/changelog.md">Описание на русском</a>
</p>
# Changelog
## Version 1.9.9
* Fix bugs: #343
## Version 1.9.8
* Dependencies update.
* Fix bugs: #318,#324, #336, #325
## Version 1.9.7
* Added webpack [ProvidePlugin](https://webpack.github.io/docs/list-of-plugins.html#provideplugin) support. This is optional, see [tars-config](https://github.com/tars/tars/blob/master/docs/en/options.md#provideplugin).
## Version 1.9.4
* Build won't be deleted in dev-mode.
## Version 1.9.2
* Fix bug with helper Icon in handlebars.
## Version 1.9.1
* Use gulp-pug-inheritance from fork because of errors in original.
## Version 1.9.0
* gulp-minify-html replaced with на gulp-htmlmin.
* Add templater Pug support.
* You can pass any data to templater by using env var TARS_ENV.
* Bugfix.
* English docs fixup and full update. Thanks to [icehaunter](https://github.com/icehaunter).
* Dependencies update.
## Version 1.8.3
* Fix bug with svg2png in 2.0.0 Use 1.0.2
## Version 1.8.2
* Fix watcher for templates with _ in the begining of the name;
* Default scheme for Jade component has been changed.
* Dependencies update. Eslint has been updated to version 3.x.x.
## Version 1.8.1
* Init process without user-package.json fixed.
* Autoprefixer was added for IE9.
* Pathes for IE entry points were fixed.
* Dependencies update.
## Version 1.8.0
* Modules directory was renamed to components. This is optional, you can change it in [tars-config](options.md#componentsfoldername).
* Task concat-modules-data was renamed to concat-mocks-data.
* Log fixing for case, when there is problems with sprite generation.
* You can configure gulp-plugins by using [plugins-config.js](plugins-options.md).
* Jade recompilation became faster.
* You can crate components inside another components.
* All images from assets of component will be moved to static/img/assets. Images are files with extensions svg, png, jpg, jpeg, jpe, gif, tiff and bmp.
Other files will be moved to static/components-assets.
* staticPrefix was removed from tars-config.
* Option [generateStaticPath](options.md#generatestaticpath) was added.
* Build name is based on local date.
* TARS works in NodeJs 6.x.x version.
## Version 1.7.1
* Rebuild process of jade-templates became faster.
* Gulp-csso update to version 2.0.0.
## Version 1.7.0
* Plugin gulp-strip-debug has been deleted. uglifyJS will strip all useless code.
* Error log became much more clear.
* You can use notifier.success and notifier.error not in pipe only.
* Tars-config has been updated. All JavaScript-options in [one object now](options.md#js).
* You can [import style-files from node_modules/bower_components by using short syntax](css-processing.md).
* [Webpack](https://webpack.github.io/) has been added. You can use old workflow (concatenation of files) or webpack — this is optional feature, you can manage it [from tars-config](options.md#workflow-1). Alse [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html) is available. This feature is [managed from tars-config too](options.md#usehmr).
* Tasks main:dev an js:processing have been updated.
* .babelrc update.
* .eslintrc update. New version of eslint is used.
```js
// Updated/added rules:
env: {
commonjs: true
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module'
},
rules: {
'consistent-return': 0,
'keyword-spacing': 2,
strict: 0,
'no-confusing-arrow': 2,
'prefer-arrow-callback': 0,
'no-debugger': 0
}
// Deleted rules:
'no-arrow-condition': undefined,
'space-return-throw-case': undefined,
'space-after-keywords': undefined,
'no-empty-label': undefined,
'no-process-exit': undefined
```
* Documentation update.
* Dependencies update.
## Version 1.6.3
* Bug with images minification has been fixed.
* Taks minify-raster-img has been renamed to minify-images. SVG-images will be minified in that task.
* Docs fixup.
## Version 1.6.2
* Icon helper has been renamed from icon to Icon
* is helper has been updated. != and !== operation has been added.
## Version 1.6.1
* Fix tasks for content images copy process.
## Version 1.6.0
* Sourcemaps are created only in dev-mode.
* Skipped tasks are highlighted in log of gulp.
* There is only one task for css pre- and postporcessing for all preprocessors.
* Stylies for IE9 are compiled in separate task.
* Watchers became much more smarter.
* There is only one task to work with templaters.
* **TARS supports only Node.js 4.x.x and higher**.
* Option for stylies-inject during livereload is [in tars-config now](options.md#injectchanges).
* jscs + jshint has been replaced with eslint.
* **[You can pass data of one module to another by using functions](html-processing.md#working-with-modules-and-data-handlebars). So, it is really easy to init module with any data.**
* Great refactoring.
- Add ES6, all tasks refactoring.
- Build process starts much more fast. All dependencies are required only at that moment then they are really needed.
- Some methods and helpers have been added:
+ skipTaskLog method — add info about skipped tasks into gulp log;
+ skipTaskWithEmptyPipe helper — it allows you to skip task, if no files were passed through that task;
+ root property — you can get absolute path to tars folder from this property.
+ isDevMode property — it returns !tars.flags.release && !tars.flags.min
- There are only links to tasks in gulpfile. All main tasks (like build, dev) have been moved from gulpfile to tasks/main and to watchers.
- Task browsersync has been removed. Browsersync starts in main:dev task.
- Tasks svg-action and compile-html-with-data-reloading have been moved to watchers.
- Task minify-html has been renamed to modify-html.
- Task pre-build has been renamed and moved into namespace main (main:pre-build).
* [You can use css-files, that won't be compiled to one file](css-processing.md).
* All js-code from static folder is in ignore section in babelrc by default. Babel has been updated to version 6.
* Page template and head module update. All useless attributes has been removed. Template looks like page in [html5boilerplate](https://github.com/h5bp/html5-boilerplate).
* You can use %=static=% or \_\_static\_\_ in CSS and HTML instead of %=staticPrefixForCss=% and %=staticPrefix=%. Old prefixes are supported, but it is strongly recommended to use new prefixes.
* staticPrefixForCss property has been removed from tars-config and it is generated in tars/tars.js automatically.
* Normalize has been updated to version 3.0.3
* **[You can use custom Jade and Handlebars helpers](html-processing.md).**
* Helper icon for Jade and Handlebars has been added to TARS. This helper generates template for svg-symbol including.
* You can use [svg-symbols](svg-processing.md#svg-symbols). TARS supports three ways to include svg-symbols. Build for IE8 not supported in that workflow. And there is a polyfill in separate-js for svg-symbols correct loading for IE9 - Edge and all browsers, which don't support with flow.
* useSVG property has been removed from tars-config. You have to configure SVG workflow by [new property in config](options.md#svg). In case of using old config (that has useSVG property), SVG config-object will be generated automatically.
* [Data about all used pages will be add to full-data of your project](html-processing.md#html).
* All sprite will have hash in their names then flag `--release` is used.
* You can set port for Browsersync by using [env var](options.md#open).
* [Default autoprefixer config has been updated](options.md#autoprefixerconfig).
* Path to static folder generates automatically and depends on pages fs.
* All useless tags, labels will be removed from build automatically. For example, if you don't build with `--ie` or `--ie8` flag, html5shiv won't be copied to ready build.
* hml5shiv-print has been removed.
* You can use plane JavaScript-object in data files.
* [You can init your project without templater and preprocessor files mutation](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-init). It would be useful for forks.
* [You can automatically update your project with TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-update-project).
* Task re-init is depricated now. This command will be removed from TARS in new version, cause there is great chance to broke your project.
* Documentation update.
## Version 1.5.0
* Installation in NPM3 has been fixed. If you have a project, which has been made with TARS 1.4.1 and NPM2, and you want to develop this project in NPM3, you have to fix one line in tars/tars.js
```javascript
handlebars: tars.require('gulp-compile-handlebars/node_modules/handlebars'),
// replace with
handlebars: tars.require('handlebars'),
```
* Handlebars is used from its own package, not from gulp-handlebars.
* You can use css-files in etc folder.
## Version 1.4.1
* Verbose logs on Error in css will be in output.
* Docs about [Babel using](js-processing.md) were updated.
* Html-prettify config was updated.
* Notification will appear on Error even all notifications has been disabled.
* Deps have been updated, bugs have been fixed.
## Version 1.4.0
* Css imports were added. Css (less, scss, sass, styl) files, began with _ will not be compiled, so it is recommended to import only these files. [More info](css-processing.md).
* Added .sass extension supporting.
* Tars-config.js has been updated. [Sourcemaps](options.md#sourcemaps) has more options. Added [Babel supporting switcher](options.md#usebabel).
* Added ES6(ES.Next) syntax supporting with [Babel](options.md#usebabel). [More info](js-processing.md).
* Autoprefixer was moved to the end in the postprocessors list.
* Notifier got one interface for failed and successed end of task.
* gulp-html-prettify has been added. Formatted HTML will be generated if [minifyHtml](options.md#minifyhtml) is switched to false.
* You need to use flags `--ie9` or `--ie` to compile stylies for IE9. `--ie` will compile stylies for IE8 and IE9 too.
* More helpers were added, docs were updated for helpers and all helpers were moved to task-folder.
* Some bugs have been fixed.
## Version 1.3.1
* Config for PostCSS has been fixed. You do not need to require packages by yourself. You just write them to config and it just works. But don't forget to install all used postprocessors locally via NPM.
## Version 1.3.0
* Sourcemaps for js was added. You can see file name and path to this file from sources in browser .
* [PostCSS](https://github.com/postcss/postcss) has been added. You can [add all postprocessors what you want](options.md#postcss).
* Notification is disabled while build process. You will see it only in that moment, when you will need it.
* Added .hbs extension support for Handlebars templates.
* Padding between images in raster-sprite has been added.
* Main pages and modules have been refactored.
* Browsersync will open default browser in OS, if there is no any [other instructions in tars-config](options.md#browser).
* New entity tars has been added. This singleton has all methods and properties, which are useful for TARS.
* [TARS-CLI has been created](https://github.com/tars/tars-cli).
* Some bugs have been fixed.
## Version 1.2.7
* Bug with gulp-svg-spritesheet has been fixed.
## Version 1.2.6
* Bug with notify, when it is off has been fixed.
## Version 1.2.4
* Bug with init has been fixed.
* Bug while png-sprite compiling has been fixed.
## Version 1.2.3
* Build process without notifier has been fixed.
## Version 1.2.2
* Assets' files watcher. Subdirectories are unsupported in modules/assets has been fixed.
## Version 1.2.1
* Code-style update. .jscsrc update.
* Path was removed from dependencies list.
* Docs in english were added.
## Version 1.2.0
* The new version of [Browsersync](https://www.browsersync.io/).
* [baseDir](options.md#basedir) option for Browsersync was moved in tars-config.
* Watchers use [chokidar](https://github.com/paulmillr/chokidar) module.
* All watchers were moved in separate files in tars/watchers folder.
* Watchers and tasks are included in gulpfile automatically.
* 'builder-start-screen' task was moved into tars/tasks/services.
* New helpers for handlebars were added (and [documentation for them](handlebars-helpers.md)). All helpers are stored in a separate file tars/helpers/handlebars-helpers.js
* Framework folder was added on the path markup/static/js. This folder is for js-files used by the framework.
* All dependences were updated.
* Including modules syntax in Handlebars was changed. There is the old syntax:
```handlebars
{{> modules/head/head head.defaults}}
```
And there is the new one:
```handlebars
{{> head/head head.defaults}}
```
* There is no more a separate task to compile styles for IE9. Styles for IE9 are compiled as part of compiling styles task for all modern browsers. A separate file is created.
* Workflow for preparing SVG was changed. Base64 encoding was changed with svg-sprite. Mixins for images including were not changed.
* mData/mData.js –> data/data.js
## Version 1.1.1
* A bug of transfer js from separate-js was fixed. It was pointed out the old name of the folder.
## Version 1.1.0
* A user-package.json was added for user dependencies. There are changes in tars/helpers/install-additional-deps.js.
* [Upgrade guide](update-guide.md) TARS was added.
* [Gulp-sass](https://www.npmjs.com/package/gulp-sass) module was updated.
* Generation version of the build was moved to a separate helper for easy customization. It is here: tars/helpers/set-build-version.js
================================================
FILE: docs/en/css-concat-processing.md
================================================
<p align="right">
English description | <a href="../ru/css-concat-processing.md">Описание на русском</a>
</p>
# CSS concat processing
Concatenation of styles will be in the following order:
* Normalize
* Styles for libraries
* Mixins, sprites
* Fonts
* Vars
* GUI
* Common stylies (common.scss)
* Styles for plugins (static/scss/plugins, including all subdirectories)
* Components' styles (css is supported)
* Styles of etc.{scss,css}
Also, you can use css files not including them into the bundle. There is a folder `separate-css` in `static/scss`, where you can store all files, which have to be included manually. There is an example of including in any template:
```handlebars
<link href="%=static=%css/separate-css/your-file.css" rel="stylesheet" type="text/css">
```
**%=staticPrefix=% prefix works, but this prefix is deprecated! Use just `%=static=%`!**
================================================
FILE: docs/en/css-manual-processing.md
================================================
<p align="right">
English description | <a href="../ru/css-manual-processing.md">Описание на русском</a>
</p>
# CSS manual processing
This workflow will be usefull, if you need to control css processing by yourself. You can use manual css processing in TARS from version 1.8.0
Main entry points, style files which will contain imports for project style, are located at `static/scss/entry`. By default there will be one entry point created - `main.scss`. You can add more if you wil need it. These files will be compiled by a preprocessor. Your project files should be connected by adding them to entry point files via `@import` directive.
`main.scss` entry point connection is already described in templates (`components/head`). In case you add new entry points, you need to connect them in templates by hand.
`main.css` contents:
```scss
@import '../normalize.scss';
/* Libraries, which is used in current project. */
@import 'partials/_libraries.scss';
/* Libraries, which is used in current project. */
@import 'built-in-partials/_service.scss';
/* Plugins, which is used in current project. */
@import 'partials/_plugins.scss';
/* Components, which is used in current project. */
@import 'partials/_components.scss';
/* Additional style files. */
@import '../etc/etc.scss';
```
Entry point imports `normalize.scss`, then partial, where you can import libraries, then build-in partials (mixins for graphics, etc.), then partial with plugins, partial with components and lastly additional styles.
Partial with components means that you will import your components' styles into that file specifically. But you don't need to use full relative path to compontnts' style from your partial. You can do like this:
```scss
@import 'components/_template/_template.scss';
```
Including styles for plugins and libraries from `node_modules` and `bower_components` is described in [general style documentation](css-processing.md).
**Warning:** Do not edit files in `build-in-partials` directory as they can be overwritten on project update.
Also there is an `ie` directory in entry points, which contains entry points for ie8 (files should have `_ie8` suffix) and ie9 (files should have `_ie9` suffix).
Take note that only ie8 and ie9 specific styles should be included there, general styles will be added by default.
================================================
FILE: docs/en/css-processing.md
================================================
<p align="right">
English description | <a href="../ru/css-processing.md">Описание на русском</a>
</p>
# CSS
You can use folowing CSS-preprocessors:
* [Scss](http://sass-lang.com) .sass extension is supported;
* [Less](http://www.lesscss.org);
* [Stylus](http://learnboost.github.io/stylus)
You can choose CSS-preprocessor in [tars-config.js](options.md#csspreprocessor).
In general, there are no surprises when using CSS-preprocessor. Use all the possibilities offered by the selected tool.
If you are used to the usual CSS, you can use CSS-syntax in any preprocessor.
TARS supports two workflows for CSS-code processing:
* [css concatenation](css-concat-processing.md);
* [css manual processing](css-manual-processing.md).
All info below is general for both workflows.
Все, что описано ниже справедливо для обоих подходов.
All files with a `_` prefix won't be compiled by the builder. You should use these files for imports. Actually, you can import any files you want, but if you import a file without `_` you will have two copies in the compiled CSS file. This is the reason why files with `_` prefix won't be compiled. You can import all types of style files: `scss` (`sass`), `less`, `styl`, `css`.
Example of import using `scss`:
```scss
// files are located in one directory
@import '_partial.scss';
// _partial.sass is located in neighbour directory `partials`
@import '../partials/_partial.sass';
```
If you need to include files from `node_modules` or `bower_components`, you don't have to write full path to `node_modules`, you can use short syntax, TARS will expand the path like this:
```scss
@import 'bootstrap/dist/bootstrap.scss';
```
In case of that import TARS will try to find `bootstrap/dist/bootstrap.scss` in `node_modules` and `bower_components`. This feature is implemented in TARS from version 1.7.0
If you want to include the files from the static directory (pictures), you should use the placeholder %=static=%. Then including of the image as a background (in current example the picture will be taken from your main component) will be as follows (in this example scss is used):
```scss
.main {
background: url('%=static=%assets/main/bg.png') repeat;
}
```
**%=staticPrefixForCss=% prefix works, but this prefix is deprecated! Use just `%=static=%`! This prefix works in TARS from version 1.6.0**
There are a couple of points on the organization of `scss|sass|less|styl` files (e.g scss is selected):
* Each component has its own css-representation.
* Common styles for the project are recommended to put in common.scss in static/scss
* Fonts are included in `fonts.scss`
* Mixins are in `mixins.scss`
* UI-elements styles are in `GUI.scss`
* Variables are in `vars.scss`
* Libraries styles are in `static/scss/libraries` (may contains subfolders and css-files).
* Styles for plugins are in `static/scss/plugins` (may contains subfolders and css-files).
* Styles which can't be put under categories listed above have to be put in `static/scss/etc/etc.{scss,css}`.
* In the main folder with css (in this case, scss folder) you can not create new files (except when you correct task by yourself connected with working with css). New files can be created only in the `static/scss/plugins|libraries|etc|separate-css`.
If you'd like to use library from bower or npm package, you can import styles from package by using `@import`.
For IE8 and IE9 you can add fixes in a folder in the ie component folder. You need to create `ie8.{scss,sass,css}` or `ie9.{scss,sass,css}`.
================================================
FILE: docs/en/faq.md
================================================
<p align="right">
English description | <a href="../ru/faq.md">Описание на русском</a>
</p>
# FAQ
For all questions I am waiting for you in the [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) or by email [tars.builder@gmail.com](mailto:tars.builder@gmail.com).
1. **I have webpack and npm-scripts, so, I do not understand, how TARS with Gulp will be useful for me?**
Every task has its own instrument to resolve it. NPM-scripts are really good for many tasks and you can use only NPM-scripts. But Gulp is not only task-runner actually, it allows you easy transform file from FS to Stream. In case of using NPM-scripts, you have to develop parallel and async tasks processing.
And some words about webpack: it was created to resolve imports/exports/requires in JavaScript. Nowadays it has quite many plugins, but its main task is to compile JavaScript.
And in the end, Gulp + webpack = love, they can (and should) work together.
You can get more info from comments of [docs for webpack with Gulp usage](http://webpack.github.io/docs/usage-with-gulp.html).
2. **Why Gulp, and not Grunt?**
Gulp is a stream builder of JavaScript projects. It uses streams and it is really fast. For example, I have a project where about a thousand stylus files, Grunt needs about 2.5 seconds for assembly and 2 seconds for processing by autoprefixer. Gulp makes all stuff for 0.5 seconds winning Grunt at least 4 times.
3. **How to work with TARS?**
There are several variants.
* You have one big project with long period of develop/support. TARS will be extremely useful for you. Create components, pages. Store it somewhere in GIT, SVN.
* You have many projects with general components. So, in taht case you have several options:
- you can create you own library of components and include in to your own fork of TARS. So you will have all used components after init;
- you can use git. Every new project is a new branch from master. Inited TARS in master branch;
- and the last, you can store your own library of used components somewhere.
* You have many different projects. Just use CVS (GIT, SVN, etc.).
You can choose any option or create your own workflow.
4. **We have our own builder on Gulp/Grunt, but we'd like to work with TARS and use features from our builder.**
You can transfer your tasks to user-tasks in TARS. If you would like to transfer grunt-tasks, you have to rewirte them to Gulp or use [gulp-grunt](https://www.npmjs.com/package/gulp-grunt).
If you need to Init TARS with all user-tasks by default you should create your own fork of TARS and init TARS with link to your fork. You can get more info from [docs for TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-init).
5. **I have OS X (Ubuntu, Linux Mint …). Not all project's files are in the build.**
You have to increase the [ulimit](options.md#ulimit) in tars-config.js
6. **I don't know anything about Gulp. Can I use this builder?**
Knowledge of working with Gulp is not required. At the moment, builder covers most tasks of frontend. All you need to know is described in the documentation.
7. **It seems to me that you are using is too complex file structure. Can I modify it for myself?**
If you know how to work with Gulp, after renaming/deleting/creating folders, you must edit appropriate tasks or [create user-tasks](tasks.md). Some directories are not mandatory and they can be safely removed.
You can also easily expand the file structure for js using the appropriate [options](options.md#jspathstoconcatbeforemodulesjs-%D0%B8-jspathstoconcataftermodulesjs) in the builder config file.
For the main folder with statics and folders whith images you can set the name in respective [options](options.md#fs) in the builder config file.
8. **Everything seems to be installed, but nothing works. What to do? I have a Windows (7, 8, 10)**
Probably not all dependences were installed. Run `npm i` command again.
If you still have errors, it would be nice if you will send them to ([tars.builder@gmail.com](mailto:tars.builder@gmail.com)) or to [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) chat.
================================================
FILE: docs/en/file-structure.md
================================================
<p align="right">
English description | <a href="../ru/file-structure.md">Описание на русском</a>
</p>
# File structure
**File structure is generated automatically. You do not need to create anything yourself.**
Builder has the following file structure:
```
├── gulpfile.js # gulpfile of builder
├── tars.json # System file with info about builder
├── tars-config.js # Config file
├── package.json # Basic dependencies
├── .babelrc # Config for Babel
├── .eslintrc # Config for eslint
├── user-package.json # User dependencies
└── tars/ # Tasks and helpers for gulp
└── helpers/ # Helpers
└── tasks/ # System tasks
└── user-tasks/ # User's tasks
└── watchers/ # System watchers
└── user-watchers/ # User's watchers
└── tars.js # Main file of the builder
└── markup/ # The main project folder
└── components/ # Components
└── pages/ # Page's templates
└── static/ # Static-files (css, js and so on)
└── docs/ # Documentation
```
## The structure of the individual component
Component is an independent unit of the page. Example component - "header" or "footer". Each page consists of components. Any component may include other components and can be included into each other.
```
exampleComponent/ # Component example
└── assets/ # Static files for current component (files with any extension) Subdirectories unsupport
└── ie/ # Styles for IE9.scss|sass|less|styl и IE8.scss|sass|less|styl)
└── data/ # Folder for component's data
├── data.js # Data for component (there is an example for data in _template component)
├── exampleComponent.html # Handlebars-represention of component (it could be jade)
├── exampleComponent.scss|less|styl # Css-representation of component (scss|sass|less|styl)
├── exampleComponent.js # Js-represent
├── anotherComponentFolder
```
Any component can be can be embedded into another component.
All images from asstes will be moved to static/img/assets/component_name or static/img/assets/component_name/embedded_component_name, if current component is embedded into another. Images are files with extensions svg, png, jpg, jpeg, jpe, gif, tiff and bmp. Other files will be moved to components-assets (the name of folder is depend on option fs.componentsFolderName).
The basic idea is to make the component as much isolated structure as possible. You can use the [BEM](https://ru.bem.info), [web components](http://webcomponents.org) (and their [realization from Google](https://www.polymer-project.org)), something else. You can do everything by old-fashioned way, all markup is in one component, but it is not recommended. If we talk in BEM terms, each component is a block. There is an [excellent lecture](https://www.youtube.com/watch?v=pyAYbbDJjPo) on how to organize your code.
Page templates are in `pages` folder. Pages are layouts and should contain as little code as possible. To create a new page just copy the existing one (or _template) and rename it or run [tars add-page](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-add-page-pagename).
Also, you can add components via TARS-CLI — [tars add-component](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-add-module-modulename).
## Folder structure for static files
We assume that Scss was chosen as a css-preprocessor.
```
static/ # Folder for static-files. You can choose the name for that folder in tars-config.js
└── fonts/ # Fonts (can contain subdirectories)
└── img/ # Images. You can choose the name for that folder in tars-config.js
└── content/ # Images for content (can contain subdirectories)
└── plugins/ # Images for plugins (can contain subdirectories)
└── general/ # General images for project (can contain subdirectories)
└── sprite/ # Raster images, which is included in png-sprite.
└── 96dpi/ # Images for displays with dpi 96
...
└── 384dpi/ # Images for displays with dpi 384 (more info in images-processing)
└── svg/ # SVG-images
└── js/ # js
└── framework/ # js-frameworks (backbone, for example)
└── libraries/ # js-libraries (jquery, for-example)
└── plugins/ # js-plugins
└── separate-js/ # js-files, which must not be included in ready bundle
└── misc/ # General files, which will be moved to root directory of ready project — favicons, robots.txt and so on (can contain subdirectories)
└── scss
├── entry/ # Styles for entry points for css in case of manual css-processing More info [here](css-manual-processing.md).
└── etc/ # Styles, which will be included at the end of the ready css-file (can contain subdirectories)
└── libraries/ # Styles for libraries (can contain subdirectories)
└── plugins/ # Styles for plugins (can contain subdirectories)
└── sprite-generator-templates/ # Templates for sprite generating
└── sprites-scss/ # Mixins for sprites
├── separate-css/ # Css-files, which must not be included in ready bundle
├── common.scss # General styles
├── fonts.scss # Styles for fonts
├── GUI.scss # Styles for GUI elements (inputs, buttons and so on)
├── mixins.scss # Project's mixins
├── normalize.scss # Styles reset
├── vars.scss # Variables
```
## The structure of the complete build
There will be two folders in the root after assembly of the project: dev and builds. Below is the description of the dev version (with --ie8 mode enabled). The finished build is not much different from the dev version.
```
dev/
└── static/ # Folder for static-files. You can choose the name for that folder in tars-config.js
└── css/ # Ready styles and styles for IE9 and
IE8, if support is turned on and styles from separate-css.
└── components-assets/ # Static files for components.
└── exampleComponent/
└── img/ # Images for project
└── assets/ # Static files for components. Only images
└── exampleComponent/
└── content/ # Images for content
└── plugins/ # Images for plugins
└── svg-sprite/ # SVG-sprite
└── png-sprite/ # PNG-sprite for different dpi
└── rastered-svg-images/ # Raster svg-images for IE8
└── minified-svg/ # Minifies svg-images
└── js/ # Ready main.js and separate js-files
└── separate-js/
└── temp/ # Temp folder for components' data
├── Ready pages and misc-files
```
Build version of the project does not contain a temp folder, includes minified css and js files. It contains optimized pictures and an archive with the assembled project (optional).
If the option useBuildVersioning is enabled, each build will be in a separate folder on the path that is specified in the option [buildPath](options.md#buildpath), called build_ver%build_date%. If useBuildVersioning disabled, the finished project will be generated on the path that is specified in the option buildPath, in folder 'build'.
When you need to include an image you have to use the path in which they exist in the build.
Immediately after initialization or reinitialization, `.tmpPreproc` and `.tmpTemplater` folders can appear in the root folder, which contain a downloaded template and css-preprocessor. After the first build these folders will be deleted. So just ignore them. These folders are included in .gitignore, so they won't be in your repository.
This file structure can be changed with the appropriate corrections of tasks and watchers. For some folders you do not need to dig through tasks and watchers: for example, it is possible to create a folder for storing js, [which must be included before and after the components](options.md#jspathstoconcatbeforemodulesjs-и-jspathstoconcataftermodulesjs). This will be useful in case of using different js-frameworks.
Also, it is not necessary to use all the folders for images or JavaScript. If something is not necessary, it can be removed.
================================================
FILE: docs/en/fonts-and-misc.md
================================================
<p align="right">
English description | <a href="../ru/fonts-and-misc.md">Описание на русском</a>
</p>
# Working with fonts and misc-files
All fonts are in the fonts folder with statics for the project.
In misc folder you can store any additional files, such as favicon and so on. All files will be copied from here into the root of the compiled project. Supports nested directories. When you copy files folder hierarchy will be saved.
================================================
FILE: docs/en/handlebars-helpers.md
================================================
<p align="right">
English description | <a href="../ru/handlebars-helpers.md">Описание на русском</a>
</p>
# Handlebars-helpers
There are some useful built-in helpers. You can add your own helpers to `/tars/user-tasks/html/helpers/handlebars-helpers`. It is not necessary to register your helpers. You just have to add them to exported object `handlebarsHelpers` as a function. All custom helpers will be available in tempalates automatically. Besides, all custom helpers will be moved automatically after project update via TARS-CLI.
Let's describe built-in helpers.
## repeat
It is used to create a simple loop from 0 to n.
Syntax:
```handlebars
{{#repeat n}}
Do something
{{/repeat}}
```
n — is a number of repetitions. Number, integer.
## is
It is used to expand the standard `if`. Standart `if` is able to check only if a value exists or not. `is` allows you to use the default behavior of if from JavaScript. The comparison operation is passed as a string as the second argument. The comparison values are passed as a string (or as a value from data) as the first and the third arguments. Following operations are available (all operations are performed in JavaScript, respectively, and the comparison result is obtained in the same way as if it were inside JavaScript):
* `==` not strict equality;
* `===` strict equality;
* `>` strict greater;
* `>=` greater or equal;
* `<` strict less;
* `<=` less or equal;
* `!=` not strict inequality;
* `!==` strict inequality.
`test` is the variable passed to the template.
```js
testComponent: {
test: 10
}
```
Syntax:
```handlebars
{{#is test '>' 9}}
true
{{else}}
false
{{/is}}
```
## strip
It cuts all spaces from the passed content.
Syntax:
```handlebars
<style>
ul li {
display: inline-block;
}
</style>
{{#strip}}
<ul>
<li>qwe</li>
<li>asd</li>
</ul>
{{/strip}}
```
Result:
```html
<ul><li>qwe</li><li>asd</li></ul>
```
## toLowerCase
Transform passed string to lowercase.
Syntax:
```handlebars
{{toLowerCase 'string'}}
```
## toUpperCase
Transform passed string to uppercase.
Syntax:
```handlebars
{{toUpperCase 'string'}}
```
## capitalizeFirst
Transform of the first character of passed string to uppercase.
Syntax:
```handlebars
{{capitalizeFirst 'string'}}
```
## formatDate, now, i18n
Additional helpers. Docs are [here](https://github.com/assemble/handlebars-helpers)
================================================
FILE: docs/en/html-processing.md
================================================
<p align="right">
English description | <a href="../ru/html-processing.md">Описание на русском</a>
</p>
# HTML
[Jade](http://jade-lang.com), [Pug](https://pugjs.org/api/getting-started.html) or [Handlebars](http://handlebarsjs.com) can be used as a html templater. You can choose templater in [tars-config.js](options.md#templater) or [during initialization of TARS via TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-init).
You can use all features of Jade, Pug and Handlebars. If you are used to the regular HTML, choose the handlebars and write HTML as before.
If you don't want to compile a particular page, you can simply add the '_' at the begining of the page name and it will not be compiled.
If you need to include files from the static directory (images, js-files), you must use the placeholder [`%=static=%` or `__static__`](options.md#staticprefix). Then including of an image will be as in following example (in this example Handlebars is used):
```html
<img src="%=static=%img/content/example.jpg"/>
```
To include image in CSS you need to use the same placeholder – `%=static=%`. This placeholder will be replaced with string from [staticprefixforcss](options.md#staticprefixforcss) from config.
**%=staticPrefixForCss=% and %=staticPrefix=% prefixes work, but these prefixes are deprecated! Just use %=static=%! New prefixes work in TARS from version 1.6.0**
Very important feature is the usage of different data types in one template. For example, we have a head component, which has all that you should put in the head tag (different meta, titles, etc.). Suppose that every page should have its own title. Making copies of the same component, which differ only in one line is not the best practice. It would be logical to separate data from presentation.
So, the folder with the component has a folder called `data`, which has js file with data for this component.
Example of data can be found in the component _template:
```js
componentName: {
dataType: {
property: value
}
}
```
In case of syntax errors in data files from your editor you can use another syntax, just a simple JavaScript object:
```javascript
data = {
componentName: {
dataType: {
property: value
}
}
};
```
TARS supports both syntaxes by default.
In the file `data.js` comments are supported within the data object.
You can add component into another component folder from TARS 1.8.0. In that case there can be some problems with duplicating names of these components. To prevent this situation, TARS generates unique key for each embedded component using the next scheme:
```javascript
'parentComponentName_anotherParentComponent_currentComponentName' = {
dataType: {
property: value
}
};
```
In the embedded component data file you can write code as usual:
```javascript
const data = {
'currentComponentName': {
dataType: {
property: value
}
}
};
```
Unique key will be generated automatically.
By default full data will contain the data from `_template` component and a list of all project pages like this:
```javascript
__pages: [
{
name: 'pageName',
href: 'pageHref'
}
]
```
You can use this array to render a list of links to all pages of a project.
You can pass any data to templater by using env var TARS_ENV. For example, you can pass a simple string:
```bash
TARS_ENV="Hello World" tars dev --silent
```
And then you can get it in template (handlebars):
```handlebars
{{TARS_ENV}}
```
You can pass object to TARS_ENV too:
```bash
TARS_ENV="{\"name\": \"Paul\"}" tars dev --silent
```
And then you can get it in template (handlebars):
```handlebars
{{TARS_ENV.name}}
```
**It is important to add double quotes and escape quotes inside object!**
Connecting components with different data looks differently in Jade/Pug and Handlebars.
## Working with components and data in Handlebars
Including component on the page:
```handlebars
{{> componentFolderName/componentName}}
```
Including component with passing data to the template:
```handlebars
{{> componentFolderName/componentName componentName.dataType}}
```
Example of including head component with default data:
```handlebars
{{> head/head head.defaults}}
```
Inside the component data is displayed by the handlebars:
```handlebars
<title>{{title}}</title>
```
If you include component without passing data, component gets an access to the global scope. For example, if we include component `head` without data, we will have to use the following code to get access to the field `title`:
```javascript
// head/data/data.js
head: {
defaults: {
title: 'Default title'
}
}
```
index.html
```handlebars
{{> head/head}}
```
head.html
```handlebars
<title>{{head.defaults.title}}</title>
```
But, if you have passed the data to component, you will not have access to the data of a child component. You have to pass global scope to the parent component (to not pass any data while including), to pass data for a child component. Or you can use another variant:
index.html
```handlebars
{{> component1/component1 component1.main}}
```
component1.html
```handlebars
<h1>{{title}}</h1>
{{> component2/component2 component2.main}}
```
```javascript
// component1/data/data.js
component1: {
main: {
title: 'Title of component1',
component2: function (fullData) {
return fullData.component2;
}
}
}
```
component2.html
```handlebars
<h2>{{title}}</h2>
```
```javascript
// component2/data/data.js
component2: {
main: {
title: 'Title of component2'
}
}
```
So, you can get access to data of any component from data-file of current-component by using really simple construct:
```javascript
// component/data/data.js
component: {
main: {
title: 'Title of component',
innerComponentData: function (fullData) {
// fullData is an object
// with all data of the application
return fullData.componentName.componentType;
}
}
}
```
Everything will be much more easier with arrow functions ES6:
```javascript
// component/data/data.js
component: {
main: {
title: 'Title of component',
innerComponentData: fullData => fullData.componentName.componentType
}
}
}
```
Do not forget, that embeded components will have unique key in the complete data file in the build.
Handlebars is known as a very simple templater. But it is uncomfortable to use Handlebars in creation process without frameworks or something like that. So, different helpers have been added that expand Handlebars.
Helpers description can be found [here](handlebars-helpers.md).
## Working with components and data in Jade/Pug
When using Jade/Pug, each component is a mixin, which is included in a page file. Mixin can receive data.
Including component on the page:
```jade
include ../components/componentFolderName/componentName
+componentName() // Component include
```
Including component with data transmission in the template:
```jade
include ../components/componentFolderName/componentName
+componentName(componentName.dataType) // Component include
```
Example of head component including with default data:
```jade
include ../components/head/head
+head(head.defaults)
```
You have to add extension in Pug:
```jade
include ../components/head/head.pug
+head(head.defaults)
```
Inside the component data is displayed by Jade/Pug (for example, the head component):
```jade
mixin head(data)
<title>#{data.title}</title>
```
You can use any features that are available in Jade/Pug. You can include components with any nesting of child components and with any data by using inlude and '+'. And you can use functions in data.js like in examples for Handlebars.
There is one built-in helper for Jade/Pug in TARS — Icon. This helper generates templates for svg symbol inclusion. You can add your own helpers to `/tars/user-tasks/html/helpers/jade"pug-helpers`. There is an example of user-helper in there. You can use added helpers in a template like:
For Jade:
```jade
= jadeHelpers.helperName(params)
<!-- If your helper returns unescaped code -->
!= jadeHelpers.helperName(params)
```
For Pug:
```jade
= pugHelpers.helperName(params)
<!-- If your helper returns unescaped code -->
!= pugHelpers.helperName(params)
```
================================================
FILE: docs/en/images-processing.md
================================================
<p align="right">
English description | <a href="../ru/images-processing.md">Описание на русском</a>
</p>
# Images
All work with images in TARS can be divided into two parts: "Sprites" and "Separate images".
## Sprites
TARS supports two formats for a sprite image: PNG and SVG.
**TARS supports two workflows of working with SVG. You can get more info from [docs about working with SVG](./svg-processing.md)**
The general approach is described in the [presentation](http://www.slideshare.net/codefest/codefest-2014-2) of web developer [Timofey Chaptykov](https://github.com/Chaptykov). Approach is briefly described below. The advantage of this approach is explained in the presentation and will not be explained here.
Advantages of concatinating interface (and other small or often repeated images) into a single sprite will not be described here. If you don't know what a sprite is, you can look up the details [here](https://en.wikipedia.org/wiki/Sprite_(computer_graphics)).
You may skip the theory and go to the [description of the work with sprites](#sprites-inclusion).
Nowadays there are a lot of displays with different pixel density. So, what does it mean? Let's compare iPhone 3GS and iPhone 4. 3GS has 320x480 display resolution and iPhone 4 has 640x960. How can you see, resolution has doubled, but diagonal is the same. It means, that pixel became smaller. So, there is a parameter device-pixel-ratio (or dppx) which means, how many real pixels there are in one logical pixel. For iPhone 4 dppx is 2.
More details can be found [here](http://stackoverflow.com/questions/21971331/what-is-dots-per-css-inch-and-dots-per-physical-inch) and [here](http://www.w3.org/TR/css3-values/#absolute-lengths).
Suppose we have a sprite of PNG images. These pictures have a fixed size. If we will stretch this image on the number of pixels 3 times the size of the image, the image will be blurry.
To get rid of this problem, you can use an image 3 times larger for such display, and the size of the image in CSS must be set basing on the size of the original image (the property background-size).
At the moment there are screens with dppx from 1 to 4 (and soon will be higher). To prepare sprites for the 4 screen sizes is a lot of work.
SVG helps. SVG is vector, it does not depend on dppx of the screen, it is rendered perfectly in modern (and not so) browsers. You can make only 1 size and this image will look the same on all screens.
Unfortunately SVG has several disadvantages:
* SVG badly displays radial and other complex gradients (linear is displayed excellently).
* Complex shadows are badly displayed.
* Is not displayed in IE8.
So we have to combine two approaches: SVG everywhere we can use it. For the rest - prepare PNG images for those screens that you are going to support. For IE8 we will simply rasterize SVG images.
**TARS supports two workflows of working with SVG. You can get more info from [docs about working with SVG](svg-processing.md)**
## Sprites inclusion
Images that can not be rendered in SVG are copied to 'static/img/sprite/96dpi|192dpi|288dpi|384dpi'. 96dpi folder is for images for screens with dppx = 1, 192dpi folder is for images twice as large as the original, with the names of the originals. These images will be displayed on the screens with dppx = 2. And it's similar for other dppx.
Used screens are configured [in the tars-config](options.md#useimagesfordisplaywithdpi).
Including icon from raster sprite to CSS code is achieved by a mixins (example on SCSS, mixins name and other input parameters for different CSS-preprocessors are the same):
```scss
@include bg($png-image-name); // Sprite with png-images inclusion
```
Attention, $png-image-name is a **variable**, that has the same name as the icon, which you'd like to use (without extension).
`bg` mixin will include background into the CSS, picture size, background-size and sets positioning inside png sprite. It is not necessary to add nothing more, mixin will set media expression for screens with different dppx.
## Separate images
Working with separate images is very simple. Separate images are divided into several categories. Depending on the category images are placed in different locations.
Builder supports images of any type, but only SVG, PNG, JPG will be exposed to minification. _Anything described below is just a recommendation, you can structure image storage however you like._
### Images for component
They are located in the assets folder inside the component. To include image using the following template (to connect images to HTML you must use the placeholder [`%=static=% `](options.md#staticprefixforcss)):
```css
.componentName {
background: url('%=static=%assets/componentName/sample-image-name.png') no-repeat;
}
```
If you would like to insert images in HTML, you have to use the placeholder [`%=static=%`](options.md#staticprefix):
```handlebars
<div class="news__item">
<img src="%=static=%img/assets/componentName/sample-image-name.png" alt="">
</div>
```
**%=staticPrefixForCss=% and %=staticPrefix=% prefix works, but these prefixes are deprecated! Use just `%=static=%`! New prefix works in TARS from version 1.6.0**
Nested directories are supported.
### Images for content
They are in the folder (by default): `static/img/content/`. You should put images that you will use in the content area on the site into this folder, for example, on the news page. Nested directories are supported.
Including images inside HTML:
```handlebars
<div class="news__item">
<img src="%=static=%img/content/sample-image-name.jpg" alt="">
</div>
```
**%=staticPrefix=% prefix works, but this prefix is depricated! Use just `%=static=%`!**
### Images for plugins
They are in the folder (by default): `static/img/plugins/`. In this folder you should put images that are used in different plugins. Nested directories are supported.
### General images
They are in the folder (by default): `static/img/general/`. In this folder you should put images that are used for the whole project, such as the general background of the site. Nested directories are supported.
================================================
FILE: docs/en/js-concat-processing.md
================================================
<p align="right">
English description | <a href="../ru/js-concat-processing.md">Описание на русском</a>
</p>
# JS-processing with simple concatenation
You should use this workflow in case if you don't have large project or you don't need to resolve dependencies between files. All JavaScript files will be concatenated into one file in a specific order.
By default JavaScript files are located in 2 places:
* in the static folder, in a subfolder named `js`;
* in each separate component.
You can add your own folders for JavaScript, using the appropriate [option](options.md#jspathstoconcatbeforemodulesjs-and-jspathstoconcataftermodulesjs) in the TARS config file.
All JavaScript-code is collected in a separate file, except for JavaScript files, which are located in a `separate-js` directory. These files are copied as-is in the build. Example of such file is `html5shiv.js`.
Files are collected in the following order:
* `static/js/framework` (including subfolders)
* `static/js/libraries` (including subfolders)
* `static/js/plugins` (including subfolders)
* all files, which have paths in the `jsPathsToConcatBeforeModulesJs` option
* JavaScript-files from components
* all files, which have paths in the `jsPathsToConcatAfterModulesJs` option
**All files with `_` in the begining of the file name won't be added to bundle and won't be linted by eslint.**
Checking files from `jsPathsToConcatBeforeModulesJs` and `jsPathsToConcatAfterModulesJs` can be controlled separately by [appropriate options](options.md#jspathstoconcatbeforemodulesjs-and-jspathstoconcataftermodulesjs).
================================================
FILE: docs/en/js-processing.md
================================================
<p align="right">
English description | <a href="../ru/js-processing.md">Описание на русском</a>
</p>
# JS-processing
TARS supports two workflows for JavaScript-code processing:
* [concatenation of all JavaScript-files into one bundle in a specific order](js-concat-processing.md);
* [resolving dependencies between JavaScript-files (from TARS 1.7.0)](js-webpack-processing.md).
Both workflows support style and error checking with eslint. Config files for eslint are in the root folder: `.eslintrc` and `.eslintignore`. You can switch off eslint by using [`js.lint` config option in `tars-config.js`](options.md#lint)
ES6 (ES.Next) syntax is supported by using [Babel](https://babeljs.io/). Use option [`useBabel`](options.md#usebabel) to turn on the ES6 (ES.Next) syntax (it is turned off by default). If you want to exclude some files from Babel processing you can add `babel_ignore_` to the begining of file name or add the file (or directory) to ignore in `.babelrc` in the project root. All JavaScript files from folders `static/framework`, `static/libraries`, `static/plugins` and `static/separate-js` are ignored in `.babelrs` by default. All config for Babel is in the project root. See [all babel options](https://babeljs.io/docs/usage/options/), except for sourcemap and filename which is handled for you.
You can manage sourcemaps from [options](options.md#sourcemaps).
================================================
FILE: docs/en/js-webpack-processing.md
================================================
<p align="right">
English description | <a href="../ru/js-webpack-processing.md">Описание на русском</a>
</p>
# JS-processing with webpack
**Please, direct all questions about "how webpack works"/"how to configure webpack" to Google, Stack Overflow and so on!**
If you do not know anything about webpack, please, read [documentation of webpack](http://webpack.github.io/docs/) at first.
Webpack is already configured in TARS for comfortable work. But you can change `webpack.config.js` in the project root as you need.
By default, there is only one entry point: `markup/static/js/main.js`. You can choose another entry point or points. **You have to use function `prepareEntryPoints` to prepare config object with entry points. It is necessary for Hot Module Replacement!**
By default webpack can resolve dependencies, which is required by `require` (`import/export`, if babel is used). You can require JavaScript file of any component in any JavaScript file of your project by using alias `components`. Let's assume, that we are in `markup/static/js/main.js` and we'd like to require JavaScript file from component `example`. You can set relative path, but it is to difficult to calculate the correct path. So we can use alias `components`:
```js
import foo from 'components/example/example'; // useBabel: true
// or
const foo = require('components/example/example');
// Old type will work too
const foo = require('modules/example/example');
```
Also, there is alias for static folder:
```js
import $ from 'static/js/jquery/jquery'; // useBabel: true
// or
const $ = require('static/js/jquery/jquery');
```
If you need to require module from `node_modules`, you should specify package name only:
```js
import $ from 'jquery'; // useBabel: true
// or
const $ = require('jquery');
```
Sourcemaps are already configured and you can [manage them from tars-config](options.md#sourcemaps). Sourcemaps from vendor modules will be added to main sourcemaps by source-map-loader. uglifyJS is used to compress production-ready code.
You can use value of `NODE_ENV` in your code. [webpack.DefinePlugin](http://webpack.github.io/docs/list-of-plugins.html#defineplugin) is used.
Webpack built-in watcher is used for changes in your code.
Also, you can use [Hot module replacement](https://webpack.github.io/docs/hot-module-replacement.html). This feature is implemented with middleware for Browser-sync and plugin [webpack.HotModuleReplacementPlugin](http://webpack.github.io/docs/list-of-plugins.html#hotmodulereplacementplugin).
By defult you can use babel to transpile your ESNext code into ES5. Babel-loader is used. Also, you can lint your code by eslint. Eslint-loader is used for this feature. Eslint uses built-in JavaScript code parser, but if you need to lint ESNext code, you have to use another parser: babel-eslint. So, you have to install it localy and set it in .eslintrc. You can get more info from [babel-eslint repository](https://github.com/babel/babel-eslint) and [documentation for eslint](http://eslint.org/docs/user-guide/configuring#specifying-parser-options).
================================================
FILE: docs/en/options.md
================================================
<p align="right">
English description | <a href="../ru/options.md">Описание на русском</a>
</p>
# Options
All builder configuration is in one file — `tars-config.js` at the root of the project.
You need to restart the build to apply changes.
## Variable options
### postcss
Type: `Array`
Default: `[]`
Example:
````javascript
postcss: [
{
name: 'postcss-short',
options: {
deny: ['text']
}
}, {
name: 'postcss-size',
options: {}
}
]
````
You can set all used postprocessors. Do not forget to install them.
### svg
Type: `Object`
Config for working with SVG in TARS.
#### active
Type: `Boolean`
Default: `true`
Activate svg-processing.
#### workflow
Type: `String`
Default: `sprite`
Available workflows of working with SVG in TARS. You can use SVG-sprite `sprite` and SVG-symbols `symbols`.
**Build for IE8 won't be created then "symbols" is used**
#### symbolsConfig
Type: `Object`
Config for working with SVG then "symbols" workflow is selected.
##### loadingType
Type: `String`
Default: `inject`
This option sets type of svg-symbols loading workflow.
You can set:
* inject into the page code — `inject`;
* just separate file — `separate-file`;
* separate file with link for each use to that file — `separate-file-with-link`.
##### usePolyfillForExternalSymbols
Type: `Boolean`
Default: `true`
SVG-symbols loading from separate file is supported in all modern browsers natively except IE9 - Edge. You have to use polyfill for them. If you do not support IE, you can set false to this option.
##### pathToExternalSymbolsFile
Type: `String`
Default: `''`
You can set a path to file with svg-symbols. File will be created in that directory, which was set in option. It will be created in the root of your build by default.
Possible value: `static/images/`.
### css
Type: `Object`
Config for CSS processing in TARS.
#### workflow
Type: `String`
Default: `concat`
Type of CSS-code processing.
You can set:
* `concat` — concatenation of all CSS-files into one bundle in a specific order;
* `manual` — you have to import all used files into entry points by yourself.
### js
Type: `Object`
Config for JavaScript processing in TARS.
#### workflow
Type: `String`
Default: `concat`
Type of JavaScript-code processing.
You can set:
* `concat` — concatenation of all JavaScript files into one bundle in specific order;
* `modular` — using bundler, which will resolve all dependencies between JavaScript-files.
#### bundler
Type: `String`
Default: `webpack`
You can specify bundler, if `modular` workflow is selected. Right now you can only choose webpack.
#### lint
Type: `Boolean`
Default: `true`
Error checking in JavaScript code and code style (config for eslint is in the project root, in `.eslintrc`. See [eslint options](http://eslint.org/)). Also, you can manually switch off linting of files and folders by using `.eslintignore` in the root of your project.
#### useBabel
Type: `Boolean`
Default: `false`
This option allow to use [Babel](https://babeljs.io/) for ES6(ES7) syntax support. Config for Babel is in project root, in `.babelrc`. See [babel options](https://babeljs.io/docs/usage/options/), except for `sourcemaps` and `filename` which are handled for you by default.
#### webpack
Type: `Object`
You can switch on/off additional cool features for webpack.
##### useHMR
Type: `Boolean`
Default: `false`
Switch on/off [Hot module replacement](https://webpack.github.io/docs/hot-module-replacement.html).
##### providePlugin
Type: `Object`
Default: `{}`
[Provide Plugin](https://webpack.github.io/docs/list-of-plugins.html#provideplugin) options. Automatically loaded modules.
#### removeConsoleLog
Type: `Boolean`
Default: `true`
Removing console.log and alerts from js files in the build. It's an option, because sometimes it is necessary to retain console.log in the complete build.
#### jsPathsToConcatBeforeModulesJs and jsPathsToConcatAfterModulesJs
Type: `Array of Strings`
Default: `[]`
This option makes sense only in case of using concat workflow. In that case all JavaScript code of the project is concatenated into one file except for JavaScript files located in the `separate-js` directory. If you want to include files from other locations into the build (for example, you created a separate directory for JavaScript files), you can register it in these options by adding a path or an array of paths (patterns paths, such as `controllers/**/*.js`) to JavaScript files. Files, which should be added to the build before main modules should be added in `jsPathsToConcatBeforeModulesJs` and after main modules in `jsPathsToConcatAfterModulesJs`
It will be useful for building a website on a JavaScript framework, which adds its own entities (such as controller, router, etc.). You do not need to go into tasks, just create a separate directory and specify for which files you want to watch.
Also you can disable eslint for these files (lintJsCodeBeforeModules and lintJsCodeAfterModules options).
### sourcemaps
Type: `Object`
Default:
```javascript
sourcemaps: {
js: {
active: true,
inline: true
},
css: {
active: true,
inline: true
}
},
```
Config for sourcemaps. Sourcemaps for JavaScript and CSS work only in dev mode.
active {Boolean}: to use sourcemap or not.
inline {Boolean}: to use sourcemap inlined into source-file or to use a separate file.
### notifyConfig
Config for notifications module.
When project files are changed there will be given a system notifications, which will indicate which file is changed and what task is executed.
#### useNotify
Type: `Boolean`
Default: `true`
Enabling of notification. You can disable notifications by using environment variables:
```bash
export DISABLE_NOTIFIER=true;
# or
export NODE_ENV=production;
```
Environment variables will overwrite useNotify value from tars-config.js
#### title
Type: `String`
Default: `'TARS notification'`
Each notification has a title. If you want to see another title, you should change this option.
#### sounds
Sounds during the notifications.
##### onSuccess
Type: `String, undefined`
Default: `undefined`
In this option the name of the system sound is passed which will be played during the notification in case of a successful build. If you don't need the sounds, you can set it with `undefined` value.
##### onError
Type: `String, undefined`
Default: `undefined`
In this option the name of the system sound is passed which will be played during the notification in case of a failed build. If you don't need the sounds, you can set it with `undefined` value.
### minifyHtml
Type: `Boolean`
Default: `false`
Enabling minifications for HTML. If is set to `false`, compiled html will be prettified.
### generateStaticPath
Type: `Boolean`
Default: `true`
This option turns on autogeneration of a relative path to the static directory from the current page. In case of using a server or livereload, path to static won't be generated, because static files are served by the server.
### devPath
Type: `String`
Default: `'./dev/'`
You can set a string with a relative or an absolute path to the folder where the project should be built in development mode.
Using `/` after the path name is required so that there are no problems accessing the files.
### buildPath
Type: `String`
Default: `'./builds/'`
You can set a string with a relative or an absolute path to the folder where the project should be built.
If you are using useBuildVersioning (use versioning of builds), each new build will be created in a separate folder with a name - the build version, and each folder will be created at the path specified in `buildPath`.
Using `/` after the path name is required so that there are no problems accessing the files.
### useBuildVersioning
Type: `Boolean`
Default: `true`
Use build versioning. The name of the version consists of the build name + date of creation (accurate to a second).
### useArchiver
Type: `Boolean`
Default: `true`
Creating the archive of the build. The archive is created in the folder with the build. If project name is set in `package.json`, it will be used as the archive name, otherwise it will be `build` by default. The date of build creation will be also added to the name of the archive.
### ulimit
Type: `Number`
Default: `4096`
By default, the number of simultaneously open files in the operating system (unix based) is limited. Since the TARS is working on Gulp, the number of simultaneously open files may be large. To avoid problems with that, you can set [ulimit](http://ss64.com/bash/ulimit.html). If the project uses the large number of files and some of them do not get into the final build, then you can just increase this option.
## Partially modifiable options
These options can be changed before the command `init` only, because they don't influence any other command, besides `useImagesForDisplayWithDpi`. More info below.
### templater
Type: `String`
Default: `handlebars`
Options: `jade`, `pug`, `handlebars`
Used templater is specified in this option. `Jade`, `pug` and `handlebars` are available for now. The name of the templater is set in the option with a small letter.
If you want to write in plain HTML, retain the option unchanged.
### cssPreprocessor
Type: `String`
Default: `scss`
Options: `scss`, `sass`, `less`, `stylus`
Used css preprocessor is specified in this option.
### useImagesForDisplayWithDpi
Type: `Array`
Default: `[96]`
The pixel density of different screens, which will be supported by your project. Supported values are:
* 96 - 1 dppx (usual display)
* 192 - 2 dppx (retina display)
* 288 - 3 dppx (for example, nexus 5)
* 384 - 4 dppx (for example, nexus 6)
On the basis of this option, a folder for png images of different sizes for different screens is created. Read more in [images processing](images-processing.md) docs.
This option can be changed at any time, but there is a couple of important points. If this option is changed after `gulp|tars init`, it is necessary to create (or delete) directories in the `static/img/sprite/` folder by hand. The format of the folder name - option value + dpi. For example, `192dpi`.
### fs
Options for main folders with static naming. If you change the option from this block after `gulp|tars init` or `gulp|tars re-init`, it is necessary to rename the appropriate directories by hand.
#### staticFolderName
Type: `String`
Default: `'static'`
The name of the folder where static files of the the project will be. If you are developing a project locally, it is necessary that the value of this option matches with the value of [staticPrefix (deprecated)](#staticprefix) option.
#### imagesFolderName
Type: `String`
Default: `'img'`
The name of the folder where images of the project will be. Usually this folder has different names, so setting it is optional.
#### componentsFolderName
Type: `String`
Default: `'components'`
The name of the folder where components (modules for TARS 1.7.0 and below) of the the project will be.
## Deprecated
### useSVG
**Option is deprecated! Use [`svg.active`](#active)**
Type: `Boolean`
Default: `true`
Enabling svg-image support.
### staticPrefixForCss
**Option is deprecated! Value is set in `tars/tars.js`**
Type: `String`
Default: `../imageFolderName/`
Custom path to the folder with the static for css files. imageFolderName is taken from the [imagesfoldername](options.md#imagesFolderName) option.
### useJsLintAndHint
**Option has been renamed to [`lint`](#lint) and moved to js config object.**
### autoprefixerConfig
Configuration for autoprefixer ([read more here](https://github.com/postcss/autoprefixer#autoprefixer-)). In short, this module allows you not to write vendor prefixes. In this configuration you do not need to include IE8 and IE9, style assembly is done by another way for them . You can look [here](https://github.com/postcss/autoprefixer#browsers) which browsers are available. If you do not want to use autoprefixer, pass `false` in this option.
~~**Option was moved to plugins-config.json.**~~
**Option was moved to .browserslistrc.**
### browserSyncConfig
Config for the Browsersync module. This module implements the possibility livereload in browser, sharing the markup to an external web, creating a local server.
#### baseDir
#### port
#### open
#### browser
#### startUrl
#### useNotifyInBrowser
#### injectChanges
**Options were moved to plugins-config.json. You can set any [option, which is supported by browsersync](https://www.browsersync.io/docs/options/).**
### staticPrefix
The value of this option sets the value of the placeholder %=static=% or __static__, which can be used in any project files.
%=staticPrefix=% prefix works, but this prefix is deprecated! Use just %=static=% or __static__!
**Option is deprecated! Value is set in tars/tars.js**
================================================
FILE: docs/en/plugins-options.md
================================================
<p align="right">
English description | <a href="../ru/plugins-options.md">Описание на русском</a>
</p>
# Plugins configuration
Since TARS 1.8.0 you can configure most plugins (gulp plugins and more) in a separate file `plugins-config.json` in the project root. Before you had to override task using the plugin or even modify the builder files.
You can change all options, but it is **strongly recommended** to leave some options as default, because TARS depends on them to function correctly. All such options are described in comments in `plugins-config.json`.
`plugins-config.json` is not just a simple json file. You can use commnets and special expression insert(). You can use it to execute JavaScript code inside this json file. For example, `gulp-jade` need option `basedir`, where we can set path to partials. So, we can set it manually and change every time than we decide to change name of components dir. insert() allows us to do it automatically.
```js
"gulp-jade": {
"pretty": true,
"basedir": "markup/insert(tars.config.fs.componentsFolderName)"
}
```
In that case `insert(tars.config.fs.componentsFolderName)` will be replaced with value of `fs.componentsFolderName` from `tars-config.js`.
So, that code will be interpreted like:
```js
"gulp-jade": {
"pretty": true,
"basedir": "markup/components"
}
```
You can execute any JavaScript code by insert. Some more examples:
```js
"example-plugin": {
"option": "insert(function() {return 'tars'})"
}
```
insert(function() {return 'tars'}) will be replaced with:
```js
"example-plugin": {
"option": "tars"
}
```
================================================
FILE: docs/en/scenarios.md
================================================
<p align="right">
English description | <a href="../ru/scenarios.md">Описание на русском</a>
</p>
# Usage scenarios
There are 3 scenarios of using TARS. In fact, you can up with another scenarios. The main scenarios will be listed here:
* development with a transfer to the back-end for implementing;
* development of a static site locally.
* development of a static site that is ready to deploy.
You can get more info from [FAQ](faq.md).
In all scenarios, it is mean that the development mode (dev-task) will be available with any keys.
## Development with a transfer to the back-end developer
In this case, in the tars-config is important to set the minifyHtml option to false. You can also disable removeConsoleLog (false), to retain all console.log unchanged.
In tars-config, in the devPath option, it is also possible to specify a new path for integration with the back-end part of the project.
So, for the convenience of builds versioning you can include the useBuildVersioning and useArchiver options, to have the archive ready for sending in each folder with built project.
During assembly (build-task) is desirable not to use the `-–release` key.
To verify efficiency of minified files can be used the `-–min` key.
## Development of a static site locally
In this case, the minifyHtml option can be any way you want. All other options you can set as comfortable except useArchiver. This option should be turned off because we don't need useless files.
During assembly (build-task) is desirable to use the `--release` key.
## Development of a static site that is immediately ready for deploy
All the same, as for the "Development of a static site locally."
During assembly (build-task) you have to use the `--release` key.
================================================
FILE: docs/en/svg-processing.md
================================================
<p align="right">
English description | <a href="../ru/svg-processing.md">Описание на русском</a>
</p>
# Working with SVG
TARS supports two workflows for working with vector graphic: SVG-sprite and SVG-symbols. There are exist some more workflwos (inline SVG in HTML, inline in CSS, base64 in CSS, SVG-stack), but SVG-sprite and SVG-symbols is the best choice at the moment, cause they totally are supported by all browsers (from IE9). That workflows are really fast and it is comfortable to work with them.
You cannot use symbols and SVG-sprite in one time. All options for working with SVG is set in tars-config.
**It is important that when you save the image in SVG there is have to be viewBox attribute! Save SVG as an object that can be inserted into HTML without changing (in Adobe Illustrator Image location option — Embed).**
## SVG symbols
**Build for IE8 not supported in that workflow**
In that workflow SVG-images will be combined into one SVG-file and every iscon will be represented as [SVG-symbol](https://developer.mozilla.org/ru/docs/Web/SVG/Element/symbol). You can reuse each icon, set colors and size from CSS in that case. You can get more info from [css-tricks](https://css-tricks.com/svg-symbol-good-choice-icons/).
Images that will be included in such way must be in a folder (default path): 'static/img/svg/'. Nested directories are **not** supported.
Symbols are created to use it in tempaltes (html|jade|hbs). In CSS you can change colors, size, add stroke and stroke width. You sholud use helpers for symbols using in templates and components. Helper creates HTML, add size's attributes and custom classname.
Using in handlebars:
```handlebars
{{Icon iconName='iconName' className='customClass' iconWidth='25' iconHeight='25'}}
```
Using in jade:
```jade
!= jadeHelpers.Icon.call(locals, {iconName: 'iconName', className: 'customClass', iconWidth: '25', iconHeight: '25'})
```
Using in pug:
```jade
!= pugHelpers.Icon.call(locals, {iconName: 'iconName', className: 'customClass', iconWidth: '25', iconHeight: '25'})
```
You can set two properites: iconname (iconName), which you'd like to include (without extension), classname for that icon (customClass), sizes (iconWidth, iconHeight). **Sizes are not required, so you can drop it from helper options**. TARS generate class automatically by using template icon__iconName in case you have not passed it to helper. TARS use sizes from svg file if you not passed it to helper. You can use that helper in pages and components too. That helper will generate HTML like:
```html
<svg class="chrome" width="32px" height="32px">
<use xlink:href="#chrome"></use>
</svg>
```
File with ready symbols is generated by TARS automatically. It only remains to connect it. TARS supports several ways to include SVG-symbols:
* **inject** — inject into the page code;
* **separate-file-with-link** — separate file with link from each use to that file;
* **separate-file** — just separate file.
In inject case only Icon ID (its name) will be set in symbol use tag. You can manage, where you'd like to inject all symbols by using label %=symbols=%. **It is not necessary to remove that labels and scripts from tempaltes, cause they will be deleted from build automatically, if they are not used!**
In case of using separate file with link, path to SVG-symbols file and Icon ID will be passed into xlink:href.
```html
<svg class="chrome" width="32px" height="32px">
<use xlink:href="static/images/svg-symbols.svg#chrome"></use>
</svg>
```
In that case SVG-symbols file will be cached in browser. You can set the path to file by using option pathToExternalSymbolsFile in tars-config. File will be generated in that directory. File will be created in the root directory of build by default.
SVG-symbols loading from separate file is supported in all modern browsers natively except IE9 - Edge. You can use polyfill for them. You can exclude it from build by using option usePolyfillForExternalSymbols if you don't support IE. The code of polyfill including is in templates by default. **It is not necessary to remove that labels and scripts from tempaltes, cause they will be deleted from build automatically, if they are not used!**
In the third one you have to implement your own workflow of SVG-symbols injecting to HTML. You have to write some code to load SVG-symbols file and inject it into the page-code. There are two useful articles, which describe the best ways to implement it: [css-tricks](https://css-tricks.com/ajaxing-svg-sprite/) and [osvaldas.info](http://osvaldas.info/caching-svg-sprite-in-localstorage). The last is the most cool.
More info about symbols configuration you can get from [options docs](options.md#svg).
## SVG-sprites
SVG images are combined into the SVG-sprite.
SVG-images in the release-version is minified and has release hash in the name. Images that will be included in such way must be in a folder (default path): 'static/img/svg/'. Nested directories are **not** supported.
You can include image by using mixin (example on scss):
```scss
@include bg-svg($svg-image-name); // Sprite with svg-images including
```
Attention, $svg-image-name is a **var**, that has the same name as the icon, which you'd like to use (without extension).
`bg-svg` mixin will include SVG-sprite as a background, will set all necessary offsets and sizes into the CSS. In case of `--ie` and `--ie8` flags using sprite of rastered SVG-images will be created for IE8 automatically.
You can not set color of SVG icon from CSS. So, it is necessary to create production-ready icon, with correct size and color.
================================================
FILE: docs/en/tasks-and-watchers.md
================================================
<p align="right">
English description | <a href="../ru/tasks-and-watchers.md">Описание на русском</a>
</p>
# Tasks and watchers
TARS is a set of gulp-tasks organized in a special way. Each task is a separate file (except for components files, such as build, dev, etc.), where you can describe transformations of a set of files. Also, where are watchers in TARS, which allow you to start tasks after any file of your project was changed. Tasks and watchers can be system (build in TARS by default) and user's. You can use it to add more features to TARS.
In general, TARS works in developer mode as follows:
* all tasks, which are used to build your project are started;
* after build proccess all watchers will be started. They will watch for files in your project and start tasks after file change.
All built-in tasks are in the `tars/tasks` directory. They are divided into folders according to the task type. built-in watchers are in the `tars/watchers` directory. You can add your own tasks and watchers in `tars/user-tasks` and `tars/user-watchers`.
When you add tasks or watchers it is recommended to use:
* tars.config.fs.staticFolderName - for the name of the folder with statics;
* tars.config.fs.imagesFolderName - for the name of the folder with images;
* tars.templater.ext - contains an extensions for files of the selected templater;
* tars.cssPreproc.ext - contains an extensions for files of the selected css-preprocessor.
If you need to replace built-in task/watcher, you have to call you own task/watcher like it's built-in. Do not forget to repeat file structure. There is small example, which is true for tasks and watchers: let's imagine, that there is a built-in task `minify-html.js`:
```
tars/tasks/html/minify-html.js
```
And you need to use your own `minify-html.js`. So, you have to create folder `html` inside `user-tasks` and create file `minify-html.js` there (repeat file structure of built-in task and use the same name of a task):
```
tars/user-tasks/html/minify-html.js
```
In that case only user's task will be included in gulpfile.js over the default one.
If you need to include your own task into an existing task chain, for example into the dev task, you have to override main:dev task by your custom version of it with the chain that will useful for you.
Also, you can switch off any task/watcher by adding `_` sign at the begginng of the name of that task/watcher.
You can get more info in docs for [tasks](tasks.md) and [watchers](watchers.md).
================================================
FILE: docs/en/tasks.md
================================================
<p align="right">
English description | <a href="../ru/tasks.md">Описание на русском</a>
</p>
# Tasks
Each task is a [CommonJS-module](http://wiki.commonjs.org/wiki/Modules/1.1). All tasks are automatically included in gulpfile. You can create your own tasks in the `user-tasks` directory.
By default, only links for main tasks are included in gulpfile.js. For example, `build` is a link to `main:build`. So, you can override any task in TARS quite easily.
You can create your own tasks in `user-tasks` directory. There is an example task included by default. Generally, you could connect any gulp-task to TARS.
By default, each task requires a set of npm-modules and configs to work correctly:
```javascript
const gulp = tars.packages.gulp;
const gutil = tars.packages.gutil;
const notifier = tars.helpers.notifier;
```
Also, if you want to use livereload for this task, you must to connect browserSync module:
```javascript
const browserSync = tars.packages.browserSync;
```
If you require any dependences, include them here. You can add dependencies, which are not in the main `package.json`, you can add to the `user-package.json`, which is at the root of the project. The format is the same as in the main package.json
**Do not put your own dependencies in package.json. Put them into user-package.json** There is only one exception — initialization via TARS-CLI. `user-package.json` won't be created when you init your project via TARS-CLI with common archive with TARS (from current repository). Also, you can [init TARS with TARS-CLI and your own zip archive with TARS](https://github.com/tars/tars-cli#tars-init). If you need to use some additional packages and initialize project via TARS-CLI, you have to add them to user-package.json in your own TARS fork and all additional packages will end up in package.json of new project automatically after `tars init`. This feature is supported from version 1.1.8 of TARS-CLI.
After dependency connection goes the body of a module, which will export the task. Each task is described in an exported function. You have access to global variable `tars` in all tasks and watchers. You can get any info about your current project (config, used prepocessor and so on) from that variable.
Exported function returns the complete gulp-task. After that you can deal with it as with usual task for gulp.
If you need notification, your task must be ended as follows:
```javascript
// If you need to reload browser, uncomment the row below
// .pipe(browserSync.reload({stream:true}))
.pipe(
notifier('Example task is finished \n')
);
```
The string which is passed to notifier will be displayed in notifications
You can also call the callback, or return the main thread, if you want to perform tasks in a certain order. Read more [here](http://frontender.info/handling-sync-tasks-with-gulp-js).
================================================
FILE: docs/en/update-guide.md
================================================
<p align="right">
English description | <a href="../ru/update-guide.md">Описание на русском</a>
</p>
# TARS update guide
**Automatic project-update is available via TARS-CLI and TARS from version 1.5.0. You can get more info from [documentation of TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/update-actions.md). It is not necessary to do anything from this artcile in case of using TARS-CLI!**
In one major version (for example, 1.\*.\* ), you can use a markup folder (this is the folder in which should be the sources of your project) in any version. In any version within one major version building will be successful. This is true for TARS above (and including) version 1.2.0. Prior to 1.2.0 there were small changes in the file structure and method of including components in the Handlebars. All changes are available in the [changelog](changelog.md).
To get the new functionality, which was released in a new minor version (for example *.4.* ) is enough:
* [download new TARS](https://github.com/tars/tars/archive/master.zip);
* initialize it with the settings that are in your current project;
* transfer the folder markup from the current project to a new TARS;
* udpate tars-config, if it is necessary.
After that, you can use the new features. Learn more about versioning system [here](http://semver.org/).
**Automatic project-update is available via TARS-CLI and TARS from version 1.5.0. You can get more info from [documentation of TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/update-actions.md)!**
There are some important moments. For example, work with coffee-files has been added in one of the minor versions. If your project uses only JavaScript, you can also use any minor version within the major. If you want to use the coffee-files, you need to select only the version in which tasks for working with them were added or higher version.
In the [readme](../README.md) is described in which version you have access to the different functionality.
Also, if you have changed builder files (anything else, except markup folder), it is necessary to apply these changes manually. All recent changes available in [changelog](changelog.md).
================================================
FILE: docs/en/watchers.md
================================================
<p align="right">
English description | <a href="../ru/watchers.md">Описание на русском</a>
</p>
# Watchers
As tasks, watchers is a [CommonJS-module](http://wiki.commonjs.org/wiki/Modules/1.1). All watchers are automatically included in a gulpfile.
You could create your own watcher in a `user-watchers` directory. By default, there is already an example of a watcher. Let's take a closer look.
By default, each watcher requires a set of npm-modules and configs to work correctly:
```javascript
const gulp = tars.packages.gulp;
const runSequence = tars.packages.runSequence.use(gulp);
const gutil = tars.packages.gutil;
const chokidar = tars.packages.chokidar;
const watcherLog = tars.helpers.watcherLog;
```
```javascript
return chokidar.watch(
/* String of path pattern or array of strings */,
Object.assign(tars.options.watch, {
// Options set bellow will override default from tars.options.watch
// If you need default options, you can use just tars.options.watch
ignored: /* String of path pattern or array of strings to ignore. If nothing to igonre — just set it to ''*/,
persistent: /* Boolean, true by default*/,
ignoreInitial: /* Boolean, true by default*/
})
).on('all', function(event, path) {
watcherLog(event, path);
// You could start as many tasks as you need
runSequence(/* Task name (String) to start */);
});
```
You can pass a pattern or pattern arrays of path to files for which you need to watch into `chokidar.watch`.
You can pass options for `chokidar` after patterns. If default options are ok for you, you can pass just `tars.options.watch` as the second argument of `chokidar.watch`. If you need to override some options, you have to use [`Object.assign`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign).
You can pass a pattern or an array of patterns of paths to files that you want to filter from watching within current watcher into the option `ignored`.
Task name is passed to `gulp.start`, which should be run on any changes in watched files. By default watchers work for all file operations (delete, create, rename). You can change this behavior by changing the `.on('all', function(event, path)` to the needed event. List of available events is in [chokidar docs](https://github.com/paulmillr/chokidar#getting-started).
================================================
FILE: docs/ru/changelog.md
================================================
<p align="right">
<a href="../en/changelog.md">English description</a> | Описание на русском
</p>
# Changelog
## Version 1.9.9
* Исправлены: #343
## Version 1.9.8
* Обновлены версии зависимых пакетов
* Исправлены: #318,#324, #336, #325
## Version 1.9.7
* Добавлена поддержка [ProvidePlugin](https://webpack.github.io/docs/list-of-plugins.html#provideplugin) у webpack. Настройка происходит в [конфиге](https://github.com/tars/tars/blob/master/docs/ru/options.md#provideplugin).
## Version 1.9.4
* Папка build не удаляется при запуске TARS в dev-режиме.
## Version 1.9.2
* Исправлен баг с работой хелпера Icon в handlebars.
## Version 1.9.1
* Переключились на gulp-pug-inheritance из форка, так как оригинал содержит ошибки.
## Version 1.9.0
* gulp-minify-html заменен на gulp-htmlmin.
* Добавлена поддержка шаблонизатора Pug.
* Добавлена возможность передачи любых данных в шаблоны с помощью переменной окружения.
* Вычитана документация на английском языке, спасибо большое [icehaunter](https://github.com/icehaunter).
* Исправлены баги.
* Обновлена документация.
* Обновены версии зависимостей.
## Version 1.8.3
* Пофикшен баг с svg2png. Испольузется 1.0.2 версия пакета.
## Version 1.8.2
* Вотчер за шаблонами стал умнее.
* Для Jade используется свой шаблон по умолчанию для компонента.
* Обновление зависимостей сборщика. Eslint обновлен до версии 3.x.x.
## Version 1.8.1
* Проект можно заинитить без user-package.json
* Добавлен autoprefixer для IE9 в режиме ручной сборки стилей.
* Поправлены пути до партиалов в точках входа для IE.
* Обновление зависимостей сборщика.
## Version 1.8.0
* modules теперь называются components. При этом это название [конфигурируемо](options.md#componentsfoldername). Можете использовать modules как и раньше.
* Таск concat-modules-data переименован в concat-mocks-data.
* Исправлен лог ошибки при сборке спрайтов в случае, если иконка не найдена.
* Появилась возможность задавать конфиг для используемых в TARS плагинов с помощью [plugins-config.js](plugins-options.md).
* Ускорена пересборка Jade-шаблонов при изменении data-файлов.
* При добавлении SVG и использовании symbols Jade-шаблоны теперь не пересобираются. Необходимо сохранять вручную шаблоны и страницы, на которых используется иконка. Такое решение принято, чтобы не нужно было каждый раз ждать полной пересборки всех шаблонов при добавлении иконки. Изменение касается только Jade.
* Появилась возможность вкладывать компоненты друг в друга.
* Изображения из assets компонентов хранятся в static/img/assets, остальные файлы из assets будут хранится в static/components-assets. К изображениям относятся файлы svg, png, jpg, jpeg, jpe, gif, tiff и bmp.
* Опция staticPrefix удалена из конфига. Теперь она генерируется автоматом.
* Добавлена опция [generateStaticPath](options.md#generatestaticpath), которая включает построение относительного пути от текущей страницы до папки со статикой. В случае использования сервера, который будет раздавать статику (например, режим livereload) путь до статики не будет генерироваться, так как статика раздается сервером.
* Имя билда теперь генерируется, как в TARS 1.6.0 Используется локальное время.
* TARS работает в NodeJs версии 6.x.x
## Version 1.7.1
* Значительно ускорена пересборка Jade-шаблонов.
* Обновлена версия gulp-csso до второй версии.
## Version 1.7.0
* Удален плагин gulp-strip-debug. Теперь его работой занимается uglifyJS.
* Обновлен вывод при ошибке. Он стал более понятный, сразу ясно, куда смотреть в логах.
* notifier.success и notifier.error теперь можно использовать как в pipe, так и в обычных функциях. Сообщение об ошибке легко найти в консоли.
* Обновлен состав конфига сборщика. Конфиг стал более компактным.
* Появилась [возможность импортить стили из node_modules/bower_components](css-processing.md) не указывая полный путь до пакета, а использовать сокращенный путь.
* Добавлен [webpack](https://webpack.github.io/) для сборки JavaScript. Также осталась возможность использовать старый workflow для работы с JavaScript — простая склейка файлов. Управление [workflow происходит в конфиге сборщика](options.md#workflow-1). Также есть возможность использовать [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html). Эта фича опциональна, управляется из [конфига проекта](options.md#usehmr).
* Обновлены таски main:dev и js:processing. Обратите внимание на них, если они переопределены в вашем проекте.
* Обновлен .babelrc.
* Обновлен .eslintrc, так как был произведен переход на вторую версию eslint.
```js
// Обновленные/добавленные правила:
env: {
commonjs: true
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module'
},
rules: {
'consistent-return': 0,
'keyword-spacing': 2,
strict: 0,
'no-confusing-arrow': 2,
'prefer-arrow-callback': 0,
'no-debugger': 0
}
// Удаленные правила:
'no-arrow-condition': undefined,
'space-return-throw-case': undefined,
'space-after-keywords': undefined,
'no-empty-label': undefined,
'no-process-exit': undefined
```
* Обновлена документация.
* Обновлены версии зависимостей.
## Version 1.6.3
* Поправлен баг с минификацей изображений в релизной сборке. До этого фикса минификация не происходила.
* Таск minify-raster-img был переименован в minify-images. Теперь в нем еще минифицируются SVG-изображения, не являющиеся иконками.
* Правки в документации по HTML-компиляции.
## Version 1.6.2
* Icon helper был переименован из icon в Icon.
* В is helper были добавлены операции != и !==.
## Version 1.6.1
* Пофиксил таски для переноса контентных изображений.
## Version 1.6.0
* Sourcemaps создаются только в dev-режиме.
* Пропущенные таски слегка подсвечиваются в общем логе Gulp.
* Все таски для работы со стилями теперь общие для всех препроцессоров. Они больше не скачиваются и сразу находятся в TARS.
* Стили для IE9 компилятся в отдельном таске.
* Вотчеры за изменениями в стилях стали умнее. Теперь они будут вызывать только те таски, которые действительно нужны в данный момент.
* Таски для компиляции HTML объединены в один.
* **Убрана поддержка Node.js версии ниже 0.12.x включительно.**
* Опция инжекта CSS при livereload [вынесена в tars-config.js](options.md#injectchanges). Если вам нужен инжект стилей при пересборке без перезагрузки страницы, то необходимо установить эту опцию в true.
* jscs + jshint были заменены на eslint. Проверка кода проходит куда быстрее. Весь код TARS также подвергается проверке eslint перед каждым коммитом.
* **[Появилась возможность пробрасывать данные одного модуля в данные другого с помощью функций в data.js](html-processing.md#Работа-с-модулями-и-данными-в-handlebars). Теперь стало легко инициализировать модули с вложенными модулями с любыми данными в Handlebars.**
* Рефакторинг кода.
- Были отрефакторены все таски. Используется ES6.
- Ускорен запуск самой сборки. Теперь зависимости подключаются только в тот момент, когда таск запускается в первый раз. Первоначальная сборка в итоге занимает меньше времени.
- Добавлены новые методы и свойства в tars.js:
+ метод skipTaskLog — выводит лог о пропущенных тасках с информацией о причинах пропуска;
+ хелпер skipTaskWithEmptyPipe — позволяет пропустить таск, если в pipe не было передано ни одного файла.
+ Свойство root — хранит путь от корня ОС до папки tars, включая саму папку.
+ Свойство isDevMode — возвращает результат выражения !tars.flags.release && !tars.flags.min
- В gulpfile.js находятся только ссылки на таски. Это сделано с целью более легкой кастомизации TARS. Сами таски перенесены частично в tasks/main и в вотчеры. Подробности далее.
- Удален таск browsersync. Browsersync включается внутри таска main:dev
- Таски svg-action и compile-html-with-data-reloading перемещены в вотчеры напрямую, без создания доп. тасков.
- Таск minify-html переименован в modify-html, так как в этом таске происходит не только минификация html, но и форматирование.
- Таск pre-build переименован и перенесен в namespace main.
* [Появилась возможность использовать css-файлы отдельно от общего бандла](css-processing.md).
* Весь js-код из папки static по умолчанию находится в ignore в babelrc. Сам babel обновлен до 6 версии. Если вы хотите использовать самый последний TARS-CLI, в старых проектах необходимо поправить конфиг .babelrc, так как это сделано в текущей версии. По умолчанию TARS-CLI сам попытается это сделать, но в случае ошибки это придется сделать пользователю.
* Обновление шаблона страницы и модуля head. Убраны лишние атрибуты, приведено к виду в [html5boilerplate](https://github.com/h5bp/html5-boilerplate) последней версии.
* **Вместо префиксов %=staticPrefixForCss=% и %=staticPrefix=% можно использовать просто %=static=% или \_\_static\_\_ как в html, так и в css. Старые префиксы работают, но лучше использовать новый вариант.**
* staticPrefixForCss был удален из tars-config, генерируется в tars/tars.js Представляет собой обычное поле-строку.
* normalize обновлен до 3.0.3
* **[Добавлена возможность использовать кастомные хелперы для Handlebars и Jade.](html-processing.md)**
* Добавлен хелпер icon для Jade и Handlebars, который генерирует шаблон для подключения svg-symbol в HTML.
* Появилась возможность использовать [svg-символы](svg-processing.md#svg-symbols). Доступны 3 режима работы с symbols. Сборка для IE8 не производится, при выборе этого способо работы с SVG. В separate-js добавлен полифил для корректной загрузки символов из отдельного файла для IE и других браузеров, которые этого не поддерживают.
* Поле useSVG удалено из конфига. Теперь SVG конфигурируется [отдельным объектом в tars-config](options.md#svg). Если поле есть (в случае использования старого конфига), то будет использоваться оно и генерироваться SVG-спрайт.
* [В данных всегда генерируется массив с информацией о всех страницах проекта](html-processing.md#html).
* Спрайты (svg, svg-symbols, png) версионируются при использовании флага `--release`.
* port для Browsersync можно задать с помощью [переменной окружения](options.md#open).
* Обновлен [конфиг autoprefixer по умолчанию](options.md#autoprefixerconfig). Удалена поддержка префиксов для ios 5.0. Доля этой ОС меньше 1% на данный момент.
* Путь до папки со скриптами, картинками и стилями генерируется автоматом для страниц, в соответствии с их (страниц) вложенностью в директории. Теперь опцию %=static=% (\_\_static\_\_) не нужно править руками для каждой сборки, если у вас в pages есть иерархия каталогов.
* При сборке проекта без ключей `--ie`, `--ie9`, `--ie8` вырезаются все соответствующие условные комментарии. В готовый билд больше не попадает лишних файлов. Например, при сборке без ключа `--ie` или `--ie8` файл html5shiv не переносится в билд
* Удален hml5shiv-print.
* Внтури data-файлов можно использовать JavaScript-объект, в случае, если IDE ругается на текущий синтаксис data-файла.
* Появилась возможность [инициализировать проект без изменения файлов шаблонизатора или css-препроцессора](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-init). Это будет полезно владельцам форков.
* [Появилась возможность автоматического обновления TARS в проекте с помощью TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-update-project).
* **Таск re-init теперь запрещен для использования. В дальнейшем эта команда не будет поддерживаться и будет удалена из проекта, так как есть вероятность сломать проект при ее использовании.**
* Обновленна документация.
## Version 1.5.0
* Пофиксил установку в NPM3. В том случае, если у вас есть проект, который был разработан на TARS 1.4.1 и NPM2, а сейчас вы используете NPM3, необходимо заменить одну строку в tars/tars.js:
```javascript
handlebars: tars.require('gulp-compile-handlebars/node_modules/handlebars'),
// заменить на
handlebars: tars.require('handlebars'),
```
* Используется Handlebars из отдельно установленного пакета, а не из gulp-handlebars.
* Добавлена возможность использования css-файлов в папке etc.
## Version 1.4.1
* Добавлен понятный лог при ошибках в css.
* Обновлена [документация по использованию Babel](js-processing.md).
* Поправлен конфиг html-prettify.
* Нотификации при ошибках появляются, даже если они отключены.
* Обновлены версии зависимостей, пофикшены баги.
## Version 1.4.0
* Добавлена возможность использовать import в стилях. Css (less, scss, sass, styl) файлы с _ в начале файла не компилируются. Только их рекомендуется импортировать. [Подробности в документации](css-processing.md).
* Добавлена поддержка .sass расширения для файлов стилей.
* Обновлен tars-config. Поле [sourcemaps](options.md#sourcemaps) теперь имеет больше опций. Добавлен конфиг включения [Babel](options.md#usebabel).
* Добавлена поддержка синтаксиса ES6(ES.Next) с помощью [Babel](options.md#usebabel). [Подробности в документации](js-processing.md).
* Autoprefixer вставляется самым последним, сразу после всех используемых постпроцессоров.
* Notifier получил единый интерфейс. При отключенных нотификациях теперь не будет вообще никаких уведомлений в системе, даже при ошибках. Ошибки будут отображаться только в консоли. При включенных все будет как обычно. Поменялся формат нотификаций в системе, теперь выводится иконка TARS.
* Добавлен gulp-html-prettify. Теперь скомпилированный html будет отформатирован, если опция [minifyHtml](options.md#minifyhtml) установлена в false.
* Стили для IE9 не собираются автоматически. Для того, чтобы получить сборку необходимо использовать флаг `--ie9` или `--ie`, чтобы собрать под IE8 и IE9.
* Добавлены хелперы для Handlebars. Описана возможность добавления своих хелперов. Хелперы перенесены в репозиторий tars-handlebars и находятся рядом с тасками.
## Version 1.3.1
* Фикc конфига для PostCSS. Теперь не надо руками реквайрить постопроцессоры. Вы просто перечисляете постпроцессоры, которые хотите использовать в конфиге и все. Но не забудьте установить локально используемые постпроцессоры через NPM.
## Version 1.3.0
* Добавлены sourcemaps для JavaScript. Теперь можно увидеть в браузере не только файл из исходников, но даже путь до этого файла.
* Добавлен [PostCSS](https://github.com/postcss/postcss) и [возможность добавлять любые другие постпроцессоры](options.md#postcss). Отдельно использовать PostCSS пока нельзя, только совместно с каким-либо препроцессором.
* Убраны нотификации во время сборки. Теперь они будут появляться только тогда, когда они действительно нужны.
* Добавлена поддержка расширения .hbs для Handlebars-шаблонов.
* Добавлен padding между картинками в растровом спрайте.
* Отрефакторены основные модули и страницы.
* Теперь browsersync открывает бразер, установленный в системе по умолчанию, если [не указано иначе](options.md#browser).
* Созадана новая сущность, tars, которая содержит в себе все методы и ссылки на зависимости, необходимые сборщику.
* [Создан TARS-CLI](https://github.com/tars/tars-cli/blob/master/README_RU.md).
* Поправлены различные баги.
## Version 1.2.7
* Поправлен баг в gulp-svg-spritesheet.
## Версия 1.2.6
* Поправлен баг нотификацией, когда она отключена.
## Версия 1.2.4
* Поправлен баг с инициализацией TARS.
* Исправлена ошибка при собирании png-спрайта
## Версия 1.2.3
* Починил баг работы TARS c выкюченным нотификатором.
## Версия 1.2.2
* Внесен фикс в вотчер assets-файлов модуля. На данный момент поддиректории в папке assets в модуле не поддерживаются.
## Версия 1.2.1
* Обновлен code-style. Обновлен .jscsrc
* Добавлено описание workflow для [контрибутеров](for-contributors.md).
* Убрал модуль path из зависимостей.
* Добавлены доки на английском языке.
## Версия 1.2.0
* Новая версия [Browsersync](https://www.browsersync.io/).
* Опция [baseDir](options.md#basedir) для Browsersync перемещена в tars-config.
* Вотчеры используют модуль [chokidar](https://github.com/paulmillr/chokidar)
* Все вотчеры переехали в отдельные файлы в папку tars/watchers.
* Сделана автозагрузка вотчеров и тасков в gulpfile.
* Таск 'builder-start-screen' переехал в tars/tasks/services.
* Добавлены новые хэлперы в handlebars (и [документация по ним](handlebars-helpers.md)). Все хелперы хранятся в отдельном файле tars/helpers/handlebars-helpers.js
* Добавлена папка framework по пути markup/static/js Папка предназначена для js-файлов используемого фреймворка.
* Обновлены зависимости.
* Изменился синтаксис подключения модулей при использовании Handlebars. Старый синтаксис:
```handlebars
{{> modules/head/head head.defaults}}
```
Новый:
```handlebars
{{> head/head head.defaults}}
```
* Больше нет отдельного таска для компилирования стилей для ie9. Стили для ie9 компилируются в рамках таска компилирования стилей для всех современных браузеров. Отдельный файл создается.
* Поменялся workflow подготовки svg-графики. Кодирование в base64 было заменено на отдельный svg-sprite. Использование в коде не изменилось.
* mData/mData.js –> data/data.js
## Версия 1.1.1
* Исправлен баг в таске переноса js из separate-js. Было указано старое название папки.
## Версия 1.1.0
* Добавлен user-package.json для пользовательских зависимостей. Изменения в tars/helpers/install-additional-deps.js
* Добавлено [руководство по обновлению TARS](update-guide.md)
* Обновлен модуль [gulp-sass](https://www.npmjs.com/package/gulp-sass).
* Генерация версии сборки перенесена в отдельный хелпер, что упрощает ее кастомизацию. Находится тут: tars/helpers/set-build-version.js
================================================
FILE: docs/ru/css-concat-processing.md
================================================
<p align="right">
<a href="../en/css-concat-processing.md">English description</a> | Описание на русском
</p>
# CSS concat processing
Склейка стилей происходит в следующем порядке:
* Normalize
* Стили для библиотек
* Mixins, sprites
* Fonts
* Vars
* GUI
* Common stylies (common.scss)
* Стили для плагинов (static/scss/plugins, включая все поддиректории)
* Стили компонентов (.css поддерживается)
* Стили из etc.{scss,css}
Также есть возможность использовать CSS-файлы, не включая их в общий бандл. Для этого в папке static/scss есть папка separate-css, в которой вы можете положить все css-файлы, подключением которых вы будете управлять самостоятельно. Пример подключения такого файла в любом шаблоне:
```handlebars
<link href="%=static=%css/separate-css/your-file.css" rel="stylesheet" type="text/css">
```
**Префикс %=staticPrefix=% все еще работает, но крайне не желательно его использовать, так как в будущих версиях он будет удален! Используйте просто %=static=% или \_\_static\_\_!**
================================================
FILE: docs/ru/css-manual-processing.md
================================================
<p align="right">
<a href="../en/css-manual-processing.md">English description</a> | Описание на русском
</p>
# CSS manual processing
Данный подход будет полезен, если вам не хватало контроля над сборкой стилей при автоматической конкатенации. В данном режиме вы полностью управляете процессом (и порядком) сборки стилей в проекте. Ручное управление стилей досутпно с TARS версии 1.8.0 и выше.
Основные точки входа, файлы стилей, в которые будут импортироваться стили вашего проекта, находятся в папке static/scss/entry. По умолчанию там уже находится одна точка входа — main.scss Вы можете добавить еще точек входа, если вам это потребуется. Именно эти файлы будут компилироваться препроцессором. Файлы вашего проекта необходимо подключать в точки входа с помощью конструкции @import.
Подключение точки входа по умолчанию (main) уже описано в шаблонах (components/head/). В случае добавления новых точек входа, их требуется подключать в шаблонах вручную.
Содержимое main.scss выглядит следующим образом:
```scss
@import '../normalize.scss';
/* Libraries, which is used in current project. */
@import 'partials/_libraries.scss';
/* Libraries, which is used in current project. */
@import 'built-in-partials/_service.scss';
/* Plugins, which is used in current project. */
@import 'partials/_plugins.scss';
/* Components, which is used in current project. */
@import 'partials/_components.scss';
/* Additional style files. */
@import '../etc/etc.scss';
```
В точку входа импортируется normalize.scss, затем партиал, в который вы можете импортировать библиотеки, затем встроенные партиалы (различные миксины для правильной работы с графикой в проекте и т.д.), партиал с плагинами, партиал с компонентами и другие стили.
Партиал с компонентами означает, что именно в этот файл вы будете импортировать стили своих компонентов. При этом вам не обязательно указывать относительный путь до стилей компонентов от файла партиала. Достаточно сделать так:
```scss
@import 'components/_template/_template.scss';
```
Подключение стилей для плагинов и библиотек из node_modules и bower_components описано в [общей доке по работе со стилями](css-processing.md).
Большая просьба: **не редактируйте файлы из директории built-in-partials, они могут быть перезаписаны в результате обновления проекта!**.
Также в entry есть директория ie, в которой вы можете добавить точки входа для ie8 и ie9. Точки входа для ie9 должны иметь суффикс _ie9, а для ie8 — _ie8.
Обратите внимание, для этих точек входа вам необходимо подключать стили компонентов, если они есть для этих браузеров. Нет необходимости дублировать содержимое _components и _components-ie9. В _components-ie9 должны быть только стили компонентов для ie9.
================================================
FILE: docs/ru/css-processing.md
================================================
<p align="right">
<a href="../en/css-processing.md">English description</a> | Описание на русском
</p>
# CSS
В качестве CSS-препроцессора можно использовать:
* [Scss](http://sass-lang.com) также поддерживается .sass;
* [Less](http://www.lesscss.org);
* [Stylus](http://learnboost.github.io/stylus).
CSS-препроцессор выбирается в [tars-config.js](options.md#csspreprocessor).
В целом, нет каких-либо неожиданностей при использовании CSS-препроцессора. Используем все возможности, которые предоставляет выбранный инструмент.
Если вы привыкли к обычному CSS, вы можете использовать CSS-синтаксис в любом препроцессоре.
В TARS поддерживается два подхода для работы со стилями:
* [автоматическая склейка стилей сборщиком](css-concat-processing.md);
* [Ручное управление подключаемыми стилями](css-manual-processing.md).
Все, что описано ниже справедливо для обоих подходов.
Все файлы с префиксом _ не будут компилироваться сборщиком. Эти файлы нужно использовать для импортов. На самом деле вы можете импортировать любые файлы, но если вы импортируете файл, который итак попадет в бандл, у вас будет две копии одного и того же файла. Поэтому файлы с префиксом _ не компилируются. Импортировать можно как файлы препроцессора, так и обычные CSS-файлы.
Пример импорта на scss(sass):
```scss
// файлы лежат в одной директории
@import '_partial.scss';
// _partial.sass лежит в соседней директории partials
@import '../partials/_partial.sass';
```
Если требуется подключить файлы из node_modules или bower_components, можно не писать полный путь, а использовать сокращенный синтаксис, TARS сам достроит путь:
```scss
@import 'bootstrap/dist/bootstrap.scss';
```
В случае такого импорта TARS попытается найти bootstrap/dist/bootstrap.scss в node_modules и bower_components. Данная функциональность доступна с версии TARS 1.7.0
Если требуется подключить файлы из директории static (картинки), то необходимо пользоваться плейсхолдером %=static=% или \_\_static\_\_. Тогда подключение картинки в качестве background (в данном примере картинка будет взята из вашего компонента main) будет выглядеть следующим образом (в примере используется scss):
```scss
.main {
background: url('%=static=%assets/main/bg.png') repeat;
}
```
**Префикс %=staticPrefixForCss=% все еще работает, но крайне не желательно его использовать, так как в будущих версиях он будет удален! Используйте просто %=static=% или \_\_static\_\_! Новый вариант префиксов работает в TARS, начиная с версии 1.6.0**
Есть пара моментов по организации scss|sass|less|styl-файлов (далее считаем, что был выбран scss в качестве CSS-препроцессора):
* Каждый компонент имеет свое CSS-представление.
* Общие стили для проекта рекомендуется складывать в common.scss в static/scss
* Подключение шрифтов в fonts.scss
* Миксины в mixins.scss
* Описание стилей UI-элементов в GUI.scss
* Переменные в vars.scss
* Стили библиотек в static/scss/libraries (может содержать подпапки и CSS-файлы)
* Стили для плагинов в static/scss/plugins (может содержать подпапки и CSS-файлы)
* Стили, которые не ясно, куда определить, помещаем в static/scss/etc/etc.{scss,css}
* В основной папке с CSS (в данном случае это папка scss) нельзя создавать новые файлы (кроме тех случаев, когда вы сами правите таски, связанные с работой с css). Новые файлы можно создавать только в static/scss/plugins|libraries|etc|separate-css.
Если вам необходимо подключить стили bower- или npm-пакета, то используйте import нужных стилей из пакета.
Для браузеров IE8 и IE9 можно размещать отдельные фиксы в папке ie в папке компонента. Нужно создать ie8.{scss,sass,css} или ie9.{scss,sass,css}, в соответствии с тем, в какой браузер вносится фикс.
================================================
FILE: docs/ru/faq.md
================================================
<p align="right">
<a href="../en/faq.md">English description</a> | Описание на русском
</p>
# FAQ
По всем вопросам можно обращаться в [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) или по почте [tars.builder@gmail.com](mailto:tars.builder@gmail.com).
1. **У меня webpack и NPM-scripts, я не понимаю, зачем нужен TARS с Gulp?**
Для всего есть свой инструмент. Естественно, можно извернуться и для всех своих задач использовать только NPM-scripts. Но Gulp — это не только таск-менеджер (что уже делает его на одну ступень выше по удобству, чем NPM-скрипты), но и возможность легко переносить файлы в поток. С NPM-скриптами уже не так просто сделать правильную параллельную обработку задач. В любом случае потребуется еще некий index.js, в котором будет отдельно реализован последовательный flow выполнения тасков и параллельный. Также, не забываем, что и асинхронные задачи бывают.
Насчет именно webpack: инструмент был создан для того, чтобы разрешать зависимости в JavaScript изначально. Сейчас его обвесили еще плагинами, но его главная задача так и осталась прежней. Отсюда следует, что Gulp + webpack = любовь, они не конкуренты друг другу.
Можно почитать комментарии на эту тему [в документации к webpack + Gulp](http://webpack.github.io/docs/usage-with-gulp.html).
2. **Почему именно Gulp, а не Grunt?**
Gulp это потоковый сборщик проектов на JavaScript. Он использует Streams и действительно является очень быстрым. Для примера у меня есть проект, где около тысячи stylus файлов, Grunt'у нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer'ом. Gulp все это делает за 0.5 секунды выигрывая у Grunt минимум в 4 раза.
3. **Как лучше построить процесс разработки с помощью TARS?**
Единого ответа тут нет. Все зависит от специфики разработки. Рассмотрим несколько типов проектов.
* Долгоиграющий и единственный. В этом случае все просто. Создавайте компоненты, страницы, храните все в какой-либо CVS — в общем, этот сценарий самый скучный.
* Много проектов с повторяющейся функциональностью. В этом случае есть несколько путей работы с TARS:
- создать библиотеку переиспользуемых блоков и включить ее сразу в собственный форк TARS. Таким образом, при ините нового проекта в нем сразу будут все нужные блоки;
- использовать git или любую другую CVS. Пусть заиниченный TARS находится в git, а каждый новый проект — отдельная ветка;
- хранить библиотеку повторяющихся блоков отдельно.
* Много разных проектов. Также весьма простой сценарий, при котором каждый проект может быть отдельным репозиторием в git (или другой CVS).
Указанные способы выше — не догма, а лишь пример, как получить больше пользы от TARS.
4. **У нас в команде есть свой сборщик на Gulp/Grunt, хотелось бы использовать наработки из него в TARS.**
Можете перенести необходимые таски в user-tasks. Для использования grunt-тасков, если не хотите переписывать на Gulp, есть пакет [gulp-grunt](https://www.NPMjs.com/package/gulp-grunt), который запускает grunt-таск в Gulp. Но все же рекомендуем портировать grunt-таск в Gulp. Тем более, все плагины для Grunt доступны в Gulp. Если необходимо, чтобы проект инитился всегда с этими дополнительными тасками, то рекомендуем создать форк TARS, добавить в нем необходимые изменения, [инитить проект, с указанием ссылки на ваш форк](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-init). При этом, для упрощения обновления форка, все кастомные таски следует складывать в users-tasks, а зависимости для этих тасков указывать в user-package.json. Они будут ставиться с каждым заиниченым проектом.
5. **У меня OS X (Ubuntu, Linux Mint ...) В готовую сборку попадают не все файлы проекта.**
Нужно увеличить [ulimit](options.md#ulimit) в tars-config.js
6. **Я ничего не понимаю в Gulp, могу ли я комфортно пользоваться данным сборщиком?**
Знания работы с Gulp не обязательны. На данный момент сборщик покрывает большинство задач frontend'а. Все, что нужно знать — описано в документации.
7. **Мне кажется, что используется слишком сложная файловая структура. Могу ли я ее модифицировать так, как нужно мне?**
Если вы умеете работать с Gulp, то после переименования/удаления/создания папок, необходимо править соответсвующие таски или [создавать user-tasks](tasks.md). Некоторые каталоги не обязательны и могут быть спокойно удалены.
Также можно спокойно расширять файловую структуру для JavaScript с использованием [опции](options.md#jspathstoconcatbeforemodulesjs-%D0%B8-jspathstoconcataftermodulesjs) в конфиге сборщика.
Для основной папки со статикой и папки с картинками можно задать имя в [опциях](options.md#fs) в конфиге сборщика.
8. **Вроде бы все поставилось, но ничего не работает. Что делать? У меня Windows (7, 8, 10)**
Скорее всего не все зависимости поставились. Запустите команду `NPM i` еще раз.
Если в результате выполнения данной команды есть ошибки, то большая просьба прислать их на почту ([tars.builder@gmail.com](mailto:tars.builder@gmail.com)) или в [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge).
================================================
FILE: docs/ru/file-structure.md
================================================
<p align="right">
<a href="../en/file-structure.md">English description</a> | Описание на русском
</p>
# Файловая структура
**Вся файловая структура генерируется автоматически. Руками ничего создавать не нужно!**
Сборщик имеет следующую файловую структуру:
```
├── gulpfile.js # gulpfile сборщика
├── tars.json # Системный файл с информацией о текущей версии
├── tars-config.js # Конфигурационный файл
├── package.json # Основные зависимости
├── .babelrc # Конфиг для Babel
├── .eslintrc # Конфиг для eslint
├── user-package.json # Пользовательские зависимости
└── tars/ # Таски и хелперы для gulp
├── helpers/ # Хелперы
├── tasks/ # Основные таски (разложены по папкам в соответствии с типом таска)
├── user-tasks/ # Пользовательские таски
├── watchers/ # Основные вотчеры (разложены по папкам в соответствии с типом отслеживаемых файлов)
├── user-watchers/ # Пользовательские вотчеры
└── tars.js # Основной файл сборщика
├── markup/ # Основная папка с проектом
├── components/ # Компоненты
├── pages/ # Шаблоны страниц
└── static/ # Различная статика (css, js и т.п.)
└── docs/ # Документация
```
## Структура отдельного компонента
Компонент — самостоятельная единица на странице. Пример компонента — «header» или «footer». Каждая страница состоит из компонентов. Компоненты могут подключать друг друга и быть вложены друг в друга.
```
exampleComponent/ # Пример компонента
├── assets/ # Файлы, относящиейся только к данному компоненту (файлы любого типа) Поддиректории не поддерживаются.
├── ie/ # Cтили для IE8 и IE9 (ie9.scss|sass|less|styl и ie8.scss|sass|less|styl)
├── data/ # Папка для хранения данных для компонента
└── data.js # Данные для компонента в виде js-объекта (формат объекта есть в компонентк-примере _template)
├── exampleComponent.html # Html-представление компонента (также может иметь расширение jade или hbs, в зависимости от выборанного шаблонизатора)
├── exampleComponent.scss|sass|less|styl # Css-представление компонента (scss|sass|less|styl, в зависимости от выбранного css-препроцессора)
├── exampleComponent.js # Js-представление компонента
└── anotherComponentFolder
```
Любой компонент может быть вложен (как структурно, так и в коде) в любой другой.
Изображения из директории assets в результате сборки будут перемещены в static/img/assets/имя_компонента или static/img/assets/имя_компонента/имя_вложенного_компонента, если у компонент вложен в другой компонент. К картинкам относятся: svg, png, jpg, jpeg, jpe, gif, tiff и bmp. Все остальные файлы будут помещены в папку components-assets (имя папки зависит от опции fs.componentsFolderName).
Основная идея в том, чтобы сделать компонент как можно более изолированной структурой. Здесь можно использовать [BEM](https://ru.bem.info), [веб-компоненты](http://webcomponents.org) (и их [реализация от Google](https://www.polymer-project.org)), что-то еще. Можно все делать и по старинке, внутри одного компонента вся верстка, но это крайне не рекомендуется.
Если говорить терминами BEM, то каждый компонент — это блок.
Есть отличная лекция о том, как лучше организовать свой код, [ссылка](https://www.youtube.com/watch?v=pyAYbbDJjPo).
В `pages` находятся шаблоны страниц, в которые в итоге будут включены компоненты. Страницы являются лэйаутом и должны содержать в себе как можно меньше кода, чтобы структура была как можно более прозрачная.
Чтобы создать новую страницу, просто скопируйте существующую (или _template) и переименуйте или [используйте tars add-page](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-add-page-pagename).
Также вы можете добавить компонент с помощью TARS-CLI — [tars add-component](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-add-module-modulename).
## Структура папки для статики
Будем считать, что css-препроцессором был выбран Scss.
```
static/ # Папка для статики. Название для папки настраивается в tars-config.js
├── fonts/ # Шрифты (может содержать поддиректории)
├── img/ # Картинки. Название для папки настраивается в tars-config.js
├── content/ # Контентные картинки (может содержать поддиректории)
├── plugins/ # Картинки для плагинов (может содержать поддиректории)
├── general/ # Общие картинки для проекта (может содержать поддиректории)
├── sprite/ # Растровые картинки, которые должны быть включены в спрайт (png)
├── 96dpi/ # Картинки для экранов с dpi 96
...
└── 384dpi/ # Картинки для экранов с dpi 384 (более подробно в разделе работы с изображениями)
└── svg/ # SVG-картинки
├── js/ # js
├── framework/ # js-фреймворки (например, backbone)
├── libraries/ # js-библиотеки (например, jquery)
├── plugins/ # js-плагины
└── separate-js/ # js-файлы, которые не должны попасть в итоговый склеенный js-файл.
├── misc/ # Общие файлы, которые будут перемещены в корень собранного проекта — фавиконка, robots.txt и т.д. (может содержать поддиректории)
└── scss
├── entry/ # Стили, для точек входа при ручном управлении компиляции стилей. Подробнее [тут](css-manual-processing.md).
├── etc/ # Стили, которые будут подключаться в самом конце (может содержать поддиректории)
├── libraries/ # Стили библиотек (может содержать поддиректории)
├── plugins/ # Стили для плагинов (может содержать поддиректории)
├── separate-css/ # Стили, которые не должны попасть в итоговый склеенный css-файл.
├── sprite-generator-templates/ # Шаблоны, по которым генерируются спрайты
├── sprites-scss/ # Миксины для спрайтов
├── common.scss # Общие стили для всего проекта
├── fonts.scss # Стили для подключенный шрифтов
├── GUI.scss # Стили для GUI-элементов типа кнопок, полей ввода и т.д.
├── mixins.scss # Набор миксинов
├── normalize.scss # Сброс стилей
└── vars.scss # Переменные проекта
```
## Структура готовой сборки
После сборки проекта в корне появятся две папки: dev и builds. Ниже дано описание dev-версии сборки (С включенным режимом --ie8), так как готовый билд не сильно отличается от dev.
```
dev/
└── static/ # Статика для проекта (имеет имя, заданное в tars-config)
└── css/ # Готовые файлы стилей для всех основных браузеров, IE9 и IE8, если включена их поддержка и стили, которые не вошли в общую сборку.
└── components-assets/ # Файлы для компонентов.
└── exampleComponent/
└── img/ # Картинки для проекта
└── assets/ # Файлы для компонентов. Содержит в себе директории с именами тех компонентов, которые имеют доп. файлы (только картинки)
└── exampleComponent/
└── content/ # Картинки для контента
└── plugins/ # Картинки для плагинов
└── svg-sprite/ # SVG-спрайт
└── png-sprite/ # PNG-спрайты для разных dpi
└── rastered-svg-images/ # Отрастированные svg-картинки для IE8
└── minified-svg/ # Минифицированные svg
└── js/ # Итоговый main.js файл и js-файлы, которые не должны попасть в общую сборку.
└── separate-js/
└── temp/ # Папка для данных для компонентов
├── Готовые страницы и файлы из папки misc
```
build-версия проекта не содержит папки temp, включает минимизированные css- и js-файлы. Содержит оптимизированные картинки и архив с собранным проектом (опционально).
Если включена опция useBuildVersioning, то каждый билд будет лежать в отдельной папке по пути, который указан в опции [buildPath](options.md#buildpath), под названием build_ver%дата сборки%. Если useBuildVersioning отключен, то готовый проект находится по пути, который указан в опции [buildPath](options.md#buildpath), в папке build.
При подключении картинок необходимо использовать именно тот путь, по которому они лежат в собранном проекте.
Сразу после инициализации или переинициализации в корне могут появиться папки .tmpPreproc и .tmpTemplater, в которых находятся скачанные шаблонизатор и css-препроцессор. При первой же сборке эти папки будут удалены. Так что просто не обращайте на них внимание. Эти папки влючены в .gitignore, так что они точно не попадут в ваш репозиторий.
Данную файловую структуру можно менять, с правкой соответствующих тасков и вотчеров. Для некоторых папок нет необходимости лезть в таски и вотчеры. Например, можно создать папки для хранения js, [который должен быть выполнен до компонентов и после](options.md#jspathstoconcatbeforemodulesjs-и-jspathstoconcataftermodulesjs). Это будет полезно при использовании различных js-фреймворков.
Также не обязательно пользоваться всеми папками для изображений или js. Если что-то не нужно, это можно удалить.
================================================
FILE: docs/ru/fonts-and-misc.md
================================================
<p align="right">
<a href="../en/fonts-and-misc.md">English description</a> | Описание на русском
</p>
# Работы со шрифтами и misc-файлами
Все шрифты размещаются в папке fonts в папке со статикой для проекта.
В папке misc можно хранить любые дополнительные файлы проекта, например фавиконку и т.п. Все файлы отсюда буду скопированы в корень скомпилированного проекта. Поддерживается вложенность директорий. При копировании файлов иерархия папок будет сохранена.
================================================
FILE: docs/ru/for-contributors.md
================================================
# Руководство для контрибьютеров
## Code style
За основу берем [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript). На русском [uprock/javascript](https://github.com/uprock/javascript).
Есть небольшие отличия в code style Airbnb от того, как нужно писать JavaScript в TARS:
1. **Пробелы и табуляция** Для отступов и табуляции используем 4 пробела, а не 2:
```javascript
function () {
∙∙∙∙const name;
}
```
2. **Длина строки (line length).** Требования длины строки в 80 символов следует считать опциональным. Т.е. строки не должны быть слишком длинными, и должны помещаться в окно редактора даже на небольшом мониторе.
3. **Комментарии.** Ко всем неочевидным с первого взгляда кускам кода пишем комментарии. Обязательно !осмысленные! и на английском языке. Все комментарии будут модерироваться, поэтому стараемся писать на хорошем английском.
4. **Строгое равенство/не равенство (=== / !==)** Исходим из здравого смысла и пользуемся только там, где это действительно необходимо. Например в случаях с `null` или `undefined`.
5. Используем стрелочные функции по-максимуму.
6. Используем const для всего, что не будем менять. let — для переменных внутри блока (циклы), var — функциональная видимость переменной.
Чтобы проверить, все ли учтено в вашем коде, прогоните его через eslint с настройками, которые лежат в корне TARS.
## Правила работы с ветками, issue и т.д.
Вы можете создать Pull request как в мастер, так и в отдельную ветку.
### Реквест в мастер
В данном случае необходимо, чтобы код соответсвовал code-style, в нем не было ошибок и он не менял функциональность TARS — не добавлял и не убирал. Если предполагается изменение функциональности, то реквест необходимо делать в ветку с текущей разрабатываемой версией.
Необходимо добавить описание к реквесту, желательно на английском языке. Если есть проблемы с англйиским, то пишем описание на русском.
### Реквест в ветку или реквест ветки
Ветка должна иметь вменяемое имя, в котором кратко будет описано, о чем эта ветка. Запрещается название веток на русском языке.
Если ваша правка относится к какой-либо версии, то название ветки должно начинаться так: version-\*.\*.\*-add-something. Звездочки — конкретная версия, к которой относится реквест. Например, version-1.3.0-add-sourcemaps.
### Работа с issue
Если вы хотите выполнить какой-либо issue, важно получить одобрение на его выполнение от @artem-malko.
Чтобы оставить заявку, достаточно написать в комментарии к задаче: `I'll make it`. После этого нужно получить от меня большой палец (смайл в виде большого пальца поднятого вверх) и на задаче должен появиться лэйбл `in progress`. После этого можно брать задачу в работу. Задачу необходимо выполнять в отдельной ветке, которая образована от ветки текущей разрабатываемой версии, например от version-1.3.0. О том, как создавать реквест в ветку рассказано выше.
Дополнительные контрибуторы не допускаются, если на задаче есть лейбл `in progress`.
Если ваша задача перекликается по функциональности с другой, важно договориться об этом с исполнителем конфликтующей задачи, как вы будете в дальнейшем работать над конфликтующими участками кода.
Брать в работу можно только ту задачу, у которой есть хотя бы 1 лэйбл (кроме лейбла backlog) и она имеет какую-либо версию. Задачи без версии в работу не беруться, однако тут можно обсудить отдельно, возможно, задача может попасть в какой-либо ближайший релиз, если вы готовы ее выполнить.
### Создание pull-реквестов
После того, как вы закончили работу над какой-либо задачей, необходимо создать pull request в мастер или в ветку. В реквесте необходимо кратко описать, что было сделано, на что стоит обратить внимение. Также нужно указать ссылку на задачу, которую реквест решает.
Все реквесты должны пройти аппрув от @artem-malko и тесты в travis и appveyor. Аппрув — 1 большой палец от @artem-malko. Если задачу сделал @artem-malko, то необходим палец любого другого разработчика.
Внимание! Сливать свой реквест можно только после аппрува @artem-malko.
После того, как реквест слит, необходимо удалить ветку, в которой велась работа.
================================================
FILE: docs/ru/handlebars-helpers.md
================================================
<p align="right">
<a href="../en/handlebars-helpers.md">English description</a> | Описание на русском
</p>
# Handlebars-helpers
В TARS есть несколько полезных встроенных хелперов. Также есть возможность добавлять свои хелперы в файл /tars/user-tasks/html/helpers/handlebars-helpers. Вам не нужно регистрировать новый хелпер, необходимо его только объявить как поле объекта «handlebarsHelpers», как функцию. Все кастомные хелперы будут автоматически доступны в шаблонах. Кроме того, все эти хелперы будут автоматически перенесены при обновлении проекта с помощью TARS-CLI.
Поговорим о встроенных хелперах.
## repeat
Используется для создания простого цикла от 0 до n ([цикл для обхода массива данных есть в handlebars по-умолчанию](http://handlebarsjs.com/builtin_helpers.html)).
Синтаксис:
```handlebars
{{#repeat n}}
Do something
{{/repeat}}
```
n — количество повторений. Number, целое.
## is
Используется для расширения стандартного if. Встроенный if умеет проверять только существует значение или нет. #is позволяет использовать стандартное поведение if. Операция сравнения передается в виде строки вторым аргументом. 1 и 3 передаются значения для сравнения. Доступны следующие операции (все операции выполняются в JavaScript, соответственно и результат сравнения получается таким же, как если бы это был if внутри JavaScript):
* `==` нестрогое равно;
* `===` строгое равно;
* `>` строго больше;
* `>=` больше или равно;
* `<` строго меньше;
* `<=` меньше или равно;
* `!=` нестрогое неравенство;
* `!==` строгое неравенство.
test — переменная, переданная в шаблон
```js
testComponent: {
test: 10
}
```
Синтаксис:
```handlebars
{{#is test '>' 9}}
true
{{else}}
false
{{/is}}
```
## strip
Вырезает все пробелы из переданного контента.
Синтаксис:
```handlebars
<style>
ul li {
display: inline-block;
}
</style>
{{#strip}}
<ul>
<li>qwe</li>
<li>asd</li>
</ul>
{{/strip}}
```
Результат:
```html
<ul><li>qwe</li><li>asd</li></ul>
```
## toLowerCase
Перевод переданной строки в нижний регистр.
Синтаксис:
```handlebars
{{toLowerCase 'string'}}
```
## toUpperCase
Перевод переданной строки в верхний регистр.
Синтаксис:
```handlebars
{{toUpperCase 'string'}}
```
## capitalizeFirst
Перевод первого символа переданной строки в верхний регистр.
Синтаксис:
```handlebars
{{capitalizeFirst 'string'}}
```
## formatDate, now, i18n
Дополнительные хелперы. Документация по ним досутпна в репозитории проекта https://github.com/assemble/handlebars-helpers
================================================
FILE: docs/ru/html-processing.md
================================================
<p align="right">
<a href="../en/html-processing.md">English description</a> | Описание на русском
</p>
# HTML
В качестве шаблонизатора для HTML можно использовать [Jade](http://jade-lang.com), [Pug](https://pugjs.org/api/getting-started.html) или [Handlebars](http://handlebarsjs.com). Шаблонизатор выбирается в [tars-config.js](options.md#templater) или во время [инициализации TARS с помощью TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/ru/commands.md#tars-init).
Можно использовать любые средства данных шаблонизаторов. Если вы привыкли к ламповому HTML, то смело выбирайте Handlebars и просто пишите HTML как раньше.
Если не требуется компиляция определенной страницы, то можно просто добавить '_' в начало названия страницы, и она не будет скомпилирована.
Если необходимо подключить файлы из директории static (картинки, js-файлы), то необходимо пользоваться плейсхолдером [%=static=% или \_\_static\_\_](options.md#staticprefix). Тогда подключение картинки в контенте будет выглядеть следующим образом (в примере используется Handlebars):
```html
<img src="%=static=%img/content/example.jpg"/>
```
Для подключения картинки в CSS необходимо использовать тот же плейсхолдер – %=static=% или \_\_static\_\_. Данный плейсхолдер в CSS подставит значение из конфига [staticprefixforcss](options.md#staticprefixforcss).
**Префиксы %=staticPrefixForCss=% и %=staticPrefix=% все еще работают, но крайне не желательно его использовать, так как в будущих версиях он будет удален! Используйте просто %=static=% или \_\_static\_\_! Новый вариант префиксов работает в TARS начиная с версии 1.6.0**
Очень важной фичей является использование различных данных в одном шаблоне. Например, у нас есть компонент head, в котором находится все, что стоит поместить в тег head (различные meta, тайтлы и т.д.) Предположим, что на каждой странице должен быть свой title. Создавать копии одного и того же компонента, которые отличаются только одной строчкой — не целесообразно. Было бы логично отделить данные от представления.
Поэтому в папке с компонентом есть папка `data`, в которой находится js-файл с данными данного компонента.
Пример данных можно найти в компоненте _template:
```javascript
componentName: {
dataType: {
property: value
}
}
```
Если у вас IDE ругается на синтаксис, то можно использовать обычный JavaScript-объект:
```javascript
data = {
componentName: {
dataType: {
property: value
}
}
};
```
Оба синтаксиса поддерживаются TARS по умолчанию.
В файле data.js поддерживаются комментарии только внутри объекта с данными.
С версии TARS 1.8.0 появилась возможность использовать вложенные компоненты. Может получиться такая ситуация, что вложенные компоненты в двух разных компонентах могут иметь одно название и одинаковый ключ в данных. Чтобы такого не происходило TARS генерирует уникальный ключ для вложенных компонентов следующим образом:
```javascript
'parentComponentName_anotherParentComponent_currentComponentName' = {
dataType: {
property: value
}
};
```
При этом в самом вложеном компоненте вы пишете также, как и обычно:
```javascript
const data = {
'currentComponentName': {
dataType: {
property: value
}
}
};
```
Все преобразования ключа происходят автоматически.
По умолчанию в данных будут находится данные из компонента _template и список всех страниц проекта в виде:
```javascript
__pages: [
{
name: 'pageName',
href: 'pageHref'
}
]
```
Этот массив можно использовать для генерации списка ссылок всех страниц проекта.
Также, в шаблон можно передать любые данные с помощью переменной окружения TARS_ENV. Например так можно передать простую строку:
```bash
TARS_ENV="Hello World" tars dev --silent
```
Затем в шаблоне (handlebars):
```handlebars
{{TARS_ENV}}
```
Также можно передавать объекты:
```bash
TARS_ENV="{\"name\": \"Paul\"}" tars dev --silent
```
Затем в шаблоне (handlebars):
```handlebars
{{TARS_ENV.name}}
```
**Обратите внимание, при передаче объекта в переменную окружения необходимо указывать двойные кавычки, а также экранировать их!**
Подключение компонентов с различными данными выглядит по-разному в Jade/Pug и Handlebars.
##Работа с компонентами и данными в Handlebars
Подключение компонента на странице:
```handlebars
{{> componentFolderName/componentName}}
```
Подключение компонента с передачей данных в шаблон:
```handlebars
{{> componentFolderName/componentName componentName.dataType}}
```
Пример подключения компонента head с данными типа defaults:
```handlebars
{{> head/head head.defaults}}
```
Внутри самого компонента данные выводятся средствами Handlebars:
```handlebars
<title>{{title}}</title>
```
Если вы не передали данные в компонент, то компонент получает доступ в глобальный контекст. Иными словами, если мы подключим компонент head без передачи данных, то в самом шаблоне мы можем получить доступ к полю title следующим образом:
```javascript
// head/data/data.js
head: {
defaults: {
title: 'Default title'
}
}
```
index.html
```handlebars
{{> head/head}}
```
head.html
```handlebars
<title>{{head.defaults.title}}</title>
```
Если же вы передали контекст с подключением компонента, то доступ к данным других компонентов вы уже не имеете внутри подключенного. Чтобы подключать компоненты внутри других компонентов со своими данными необходимо в компонент-родитель передавать глобальный контекст (не передавать никаких данных при подключении). Тогда вы сможете передать в любой дочерный компонент необходимые данные. Либо можно воспользоваться следующим способом:
index.html
```handlebars
{{> component1/component1 component1.main}}
```
component1.html
```handlebars
<h1>{{title}}</h1>
{{> component2/component2 component2.main}}
```
```javascript
// component1/data/data.js
component1: {
main: {
title: 'Title of component1',
component2: function (fullData) {
return fullData.component2;
}
}
}
```
component2.html
```handlebars
<h2>{{title}}</h2>
```
```javascript
// component2/data/data.js
component2: {
main: {
title: 'Title of component2'
}
}
```
Таким образом, вы можете получить доступ к данным любого компонента из данных любого компонента простой конструкцией:
```javascript
// component/data/data.js
component: {
main: {
title: 'Title of component',
innerComponentData: function (fullData) {
// fullData — объект, который содержит все данные проекта
return fullData.componentName.componentType;
}
}
}
```
А если использовать стрелочные функции ES6, то все становится еще проще:
```javascript
// component/data/data.js
component: {
main: {
title: 'Title of component',
innerComponentData: fullData => fullData.componentName.componentType
}
}
}
```
Не забудьте, ключ доступа к данным вложенных компонентов будет сгенерирвоан автоматически на основе вложенности в другие компоненты.
Handlebars известен, как очень простой шаблонизатор. Но использовать его в статической верстке в таком виде не очень удобно. Поэтому были добавлены различные хелперы, расширяющие возможности Handlebars.<br/>
Описание хелперов можно прочесть [здесь](handlebars-helpers.md).
## Работа с компонентами и данными в Jade/Pug
При использовании Jade/Pug, каждый компонент — миксин, который подключается в файл страницы. Миксины могут принимать данные, этим и воспользуемся.
Подключение компонента на странице:
```jade
include ../components/componentFolderName/componentName // В начале шаблона страницы (пример — index.jade|pug)
+componentName() // Подключение компонента
```
Подключение компонента с передачей данных в шаблон:
```jade
include ../components/componentFolderName/componentName // В начале шаблона страницы (пример — index.jade|pug)
+componentName(componentName.dataType) // Подключение компонента
```
Пример подключения компонента head с дефолтными данными:
```jade
include ../components/head/head
+head(head.defaults)
```
В случае использования Pug, вам необходимо указать расширение для подключаемого компонента:
```jade
include ../components/head/head.pug
+head(head.defaults)
```
Внутри самого компонента данные выводятся средствами Jade/Pug (например, компонент head):
```jade
mixin head(data)
<title>#{data.title}</title>
```
Можно использовать любые средства, доступные в Jade/Pug. Вы можете подключать компоненты с любой сложностью, с любыми данными. Функции в data.js также доступны, как и в примерах для Handlebars.
В TARS есть один встроенный хелпер для Jade/Pug — хелпер `Icon`, который вставляет шаблон для подключения svg-symbol в HTML. Также есть возможность добавлять свои хелперы в файл /tars/user-tasks/html/helpers/jade|pug-helpers. Там же есть пример объявления хелпера. Все хелперы доступны в шаблонах следующим образом:
Для Jade:
```jade
= jadeHelpers.helperName(params)
<!-- Если необходимо вывести не заэскпейпленный HTML -->
!= jadeHelpers.helperName(params)
```
Для Pug:
```jade
= pugHelpers.helperName(params)
<!-- Если необходимо вывести не заэскпейпленный HTML -->
!= pugHelpers.helperName(params)
```
================================================
FILE: docs/ru/images-processing.md
================================================
<p align="right">
<a href="../en/images-processing.md">English description</a> | Описание на русском
</p>
# Images
Всю работу с изображениями в TARS можно разбить на две части: «Спрайты» и «Отдельные изображения».
## Спрайты
TARS поддерживает работу с двумя форматами изображений для спрайта: PNG и SVG.
**TARS поддерживает несколько способов работы с SVG-графикой. Более подробно можно прочитать в [документации по работе с SVG](./svg-processing.md)**
Общий подход отлично описан в [презентации](http://www.slideshare.net/codefest/codefest-2014-2) веб-разработчика [Тимофея Чаптыкова](https://github.com/Chaptykov). Кратко подход описан ниже. Преимущество данного подхода раскрыто в презентации и не будет объяснено ниже.
Здесь не будут описаны преимущества склейки интерфейсных (и других мелких или частоповторяющихся изображений) в единый спрайт. Если вы не знакомы с понятием спрайт — подробности [по ссылке](https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D1%80%D0%B0%D0%B9%D1%82_(%D0%BA%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80%D0%BD%D0%B0%D1%8F_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)).
Вы можете пропустить теорию и сразу [перейти к описанию работы со спрайтами](images-processing.md#%D0%9F%D0%BE%D0%B4%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D1%81%D0%BF%D1%80%D0%B0%D0%B9%D1%82%D0%BE%D0%B2).
Сегодня существует много экранов с высокой плотностью пикселей. Разберёмся, что это значит. В качестве примера рассмотрим смартфоны IPhone 3GS и IPhone 4. У 3GS разрешение экрана 320x480, а у 4-ки — 640x960. Как мы видим, разрешение увеличилось ровно в два раза при той же диагонали, а значит пиксель стал меньше. Чтобы нивелировать эту разницу между размерами пикселей (а ведь именно пикселями мы управляем в CSS) появился параметр device-pixel-ratio (или dppx), который показывает, сколько реальных экранных пикселей содержится в неком логическом пикселе, которым мы оперируем в CSS. Например, для дисплея IPhone 4 этот параметр равен 2.
Более подробно можно прочесть [здесь](http://stackoverflow.com/questions/21971331/what-is-dots-per-css-inch-and-dots-per-physical-inch) и [здесь](http://www.w3.org/TR/css3-values/#absolute-lengths).
Предположим у нас есть спрайт PNG-изображений. Такие картинки имеют фиксированные размеры. Если мы будем размазывать такую картинку на количество пикселей в 3 раза большее, чем размеры картинки, то изображение будет размыто.
Чтобы избавиться от этой проблемы, можно использовать изображение в 3 раза большего размера для подобного экрана, при этом размер картинки в CSS задавать исходя из размера оригинального изображения (свойство background-size).
На данный момент существуют экраны с dppx от 1 до 4 (скоро будут и выше). Готовить спрайты для 4 размеров экранов — это очень много работы.
Выручает SVG. Векторный, не зависит от dppx экрана, отлично рендерится в современных (и не только) браузерах. Можно сделать только 1 размер и это изображение будет выглядеть одинаково на всех экранах.
К сожалению SVG имеет несколько недостатков:
* SVG плохо отображает радиальные и другие сложные градиенты (линейные отображаются отлично).
* Плохо отображаются сложные тени.
* Не отображается в IE8.
Итого имеем два подхода: SVG для всего, чего можем. Для остального готовим PNG-изображения для тех экранов, которые вы собираетесь поддерживать. Для IE8 будем просто растрировать SVG-изображения.
**TARS поддерживает несколько способов работы с SVG-графикой. Более подробно можно прочитать в [документации по работе с SVG](svg-processing.md)**
## Подключение растровых спрайтов
Изображения, которые не могут быть отрисованы в SVG складываются в 'static/img/sprite/96dpi|192dpi|288dpi|384dpi'. В папку 96dpi кладутся изображения для экранов с dppx = 1, в папку 192dpi кладутся изображения в два раза больше оригинала, с названиями оригиналов. Данные изображения будут подключаться на экранах с dppx = 2. Далее по аналогии.
Используемые экраны настраивается [в конфиге проекта](options.md#useimagesfordisplaywithdpi).
Подключение иконки из растрового спрайта в CSS-коде производится с помощью миксина (пример на SCSS, названия миксинов и входные параметры для других CSS-препроцессоров такие же):
```scss
@include bg($png-image-name); // Подключение спрайта с png-картинками
```
Обратите внимание, в миксин передается **переменная** с именем исходной картинки (без расширения).
Миксин `bg` включит в CSS background, размер картинки, backgroud-size и задаст позиционирование внутри png-спрайта. Больше ничего добавлять не нужно, миксин сам задаст медиа-выражения для экранов с различной плотностью пикселей.
## Отдельные изображения
Работа с отдельными изображениями очень проста. Отдельные изображения разделены на несколько категорий. В зависимости от категории картинки кладутся в разные места.
Сборщик поддерживает изображения любого типа, но только SVG, PNG, JPG будут подвергаться минификации.
!Все описанное ниже является лишь рекомендацией, вы можете организовать хранение картинок так, как вам удобно!
### Картинки компонента
Находятся в папке assets внутри компонента. Для подключения используется следующий шаблон (для подключения картинки в HTML, необходимо использовать плейсхолдер [%=static=% или \_\_static\_\_](options.md#staticprefixforcss)):
```css
.componentName {
background: url('%=static=%assets/componentName/sample-image-name.png') no-repeat;
}
```
В HTML подключение выглядит чуть иначе, но используется тот же плейсхолдер [%=static=% или \_\_static\_\_](options.md#staticprefix):
```handlebars
<div class="news__item">
<img src="%=static=%img/assets/componentName/sample-image-name.png" alt="">
</div>
```
**Префикс %=staticPrefixForCss=% все еще работает, но крайне не желательно его использовать, так как в будущих версиях он будет удален! Используйте просто %=static=% или \_\_static\_\_! Новый вариант префиксов работает в TARS начиная с версии 1.6.0**
В картинки компонента стоит складывать только те картинки, которые больше нигде не встречаются. Вложенность директорий поддерживается.
### Картинки для контента
Находятся по пути (указан путь по умолчанию): 'static/img/content/'. В данную папку стоит класть картинки которые встречаются в контентных областях на сайте, например, на странице новости. Вложенность директорий поддерживается.
Подключение картинки внутри HTML:
```handlebars
<div class="news__item">
<img src="%=static=%img/content/sample-image-name.jpg" alt="">
</div>
```
**Префикс %=staticPrefix=% все еще работает, но крайне не желательно его использовать, так как в будущих версиях он будет удален! Используйте просто %=static=% или \_\_static\_\_!**
### Картинки для плагинов
Находятся по пути (указан путь по умолчанию): 'static/img/plugins/'. В данную папку стоит класть картинки которые используются в различных плагинах. Вложенность директорий поддерживается.
### Общие картинки
Находятся по пути (указан путь по умолчанию): 'static/img/general/'. В данную папку стоит класть картинки которые используются по всему проекту, например общий фон сайта. Вложенность директорий поддерживается.
================================================
FILE: docs/ru/js-concat-processing.md
================================================
<p align="right">
<a href="../en/js-concat-processing.md">English description</a> | Описание на русском
</p>
# Работа с JS с помощью простой склейки
Данный workflow стоит использовать, если у вас простое приложение и нет надобности разрешать зависимости между файлами. При выборе данного подхода все JavaScript-файлы склеиваются в один общий файл в определенном порядке. Порядок и правила склейки описаны ниже.
По умолчанию JavaScript находится в 2-ух местах:
* В папке со статикой, в подпапке с именем js
* В каждом отдельном компоненте.
Можно добавить свои папки для js, используя соответствующую [опцию](options.md#jspathstoconcatbeforemodulesjs-%D0%B8-jspathstoconcataftermodulesjs) в конфиге сборщика.
Весь JavaScript-код собирается в один отдельный файл, кроме JavaScript-файлов, которые находятся в директории separate-js. Эти файлы просто переносятся как есть в готовую сборку. Примером такого файла является html5shiv.js
Файлы собираются в следующем порядке:
* static/js/framework (включая подпапки)
* static/js/libraries (включая подпапки)
* static/js/plugins (включая подпапки)
* все файлы, пути к которым находятся в опции jsPathsToConcatBeforeModulesJs
* JavaScript-файлы компонентов
* все файлы, пути к которым находятся в опции jsPathsToConcatAfterModulesJs
**Файлы с _ в начале файла не будут попадать в общую сборку и не буду проверены линтером.**
Проверкой файлов из jsPathsToConcatBeforeModulesJs и jsPathsToConcatAfterModulesJs можно управлять отдельно, опциями lintJsCodeBeforeModules и lintJsCodeAfterModules.
================================================
FILE: docs/ru/js-processing.md
================================================
<p align="right">
<a href="../en/js-processing.md">English description</a> | Описание на русском
</p>
# Работа с JS
В TARS поддерживается два подхода в работе с JavaScript-кодом:
* [склеивание всех JavaScript-файлов в один в определенном порядке](js-concat-processing.md);
* [использование webpack, для разрешения зависимостей между файлами (доступно с версии 1.7.0)](js-webpack-processing.md).
В обоих подходах поддерживается проверка кода с помощью eslint. Конфигурация eslint находится в корне проекта: .eslintrc и .eslintignore. Управлять проверкой кода можно с помощью опции [js.lint в конфиге проекта](options.md#lint).
Также в обоих подходах есть возможность обработки JavaScript-кода с помощью [Babel](https://babeljs.io/). Для подключения Babel нужно использовать опцию [useBabel](options.md#usebabel) (по умолчанию выключено). Если вам необходимо исключить какие-либо файлы из обработки Babel, то вы можете добавить в начало названия этих файлов "babel_ignore_" или добавить их в секцию ignore в .babelrc в корне проекта. Все JavaScript-файлы из папок static/framework, static/libraries, static/plugins и static/separate-js находятся в ignore в .babelrc по умолчанию. С остальными опциями конфига Babel можно ознакомится на [официальном сайте](https://babeljs.io/docs/usage/options/). Вам не нужно использовать опции: 'filename', и все оцпии, связанные с sourcemaps. Эти опции уже заданы в самом сборщике.
Sourcemaps вы можете управлять через опцию в [конфиге сборщика](options.md#sourcemaps).
================================================
FILE: docs/ru/js-webpack-processing.md
================================================
<p align="right">
<a href="../en/js-webpack-processing.md">English description</a> | Описание на русском
</p>
# Работа с JS через webpack
**Есть большая просьба: все вопросы по настройке/работе с webpack адресовать в Google, Stack Overflow и т.д.**
Для ознакомления с webpack рекомендую изучить [скринкаст Ильи Кантора](https://www.youtube.com/playlist?list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn) и [документацию по webpack](http://webpack.github.io/docs/). Скринкаст раскрывает множество особенностей при работе с webpack и его грамотной настройке.
В TARS webpack уже настроен для того, чтобы с ним было достаточно комфортно работать. Но вы можете (и скорее всего вам придется это делать) изменять webpack-конфиг (файл webpack.config.js в корне проекта), чтобы webpack выполнял именно то, что вам нужно.
По умолчанию используется только одна точка входа: markup/static/js/main.js. Вы можете использовать другой файл и сколь угодоно большое количество точек входа. **Необходимо использовать функцию prepareEntryPoints, в которую будет передаваться объект с информацией о точках входа. Это необходимо для корректной работы Hot Module Replacement!**
По умолчанию webpack умеет разрешать зависмости, объявленные через require (import/export, если включена обработка кода через babel). При этом, в любой точке приложения вы можете подключить файл компонента с помощью алиаса «components». Предположим, что мы находимся в markup/static/js/main.js и хотим подключить в нем скрипт из компонента «example». Вместо указания относительного пути от main.js до example.js можно написать так:
```js
import foo from 'components/example/example'; // useBabel: true
// или
const foo = require('components/example/example');
// Доступен и прошлый вариант
const foo = require('modules/example/example');
```
Также есть алиас для папки static, который позволит подключить файл из папки static в любой точке приложения:
```js
import $ from 'static/js/jquery/jquery'; // useBabel: true
// или
const $ = require('static/js/jquery/jquery');
```
Для подключения библиотек из node_modules достаточно указать имя пакета:
```js
import $ from 'jquery'; // useBabel: true
// или
const $ = require('jquery');
```
В webpack уже настроены sourcemaps, которыми вы можете [управлять из конфига проекта](options.md#sourcemaps). Sourcemaps сторонних плагинов и библиотек будут добавлены к обещму sourcemap (реализовано с помощью source-map-loader). Сжатие производится с помощью плагина uglifyJS.
По умолчанию у вас есть возможность использовать переменную окружения NODE_ENV в коде. Подробнее можно узнать в [этом ролике Ильи Кантора](https://www.youtube.com/watch?v=5XZqeuWkQ4o&index=6&list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn). Используется плагин webpack.DefinePlugin.
Вотчинг за изменениями JavaScript-файлов также лежит на плечах webpack.
Также доступна горячая замена компонентов ([Hot module replacement](https://webpack.github.io/docs/hot-module-replacement.html)). На русском можно прочитать об этом на [habr'е](https://habrahabr.ru/company/Voximplant/blog/270593/) и посмотреть [ролики из скринкаста Ильи Кантора](https://www.youtube.com/watch?v=EQhXtTOxpVk&list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn&index=40). Данная возможность [опциональна](options.md#usehmr), реализована с помощью middleware для Browser-sync и плагина webpack.HotModuleReplacementPlugin.
По умолчанию встроена поддежка babel (babel-loader) и eslint (eslint-loader), которые работают через webpack. Eslint использует встроенный парсер для разбора JavaScript-кода, но если вам необходимо поддерживать совсем новые фичи (экспериментальные), вам придется использовать парсер babel-eslint. Подробности можно прочесть в [репозитории проекта](https://github.com/babel/babel-eslint) и [документации eslint](http://eslint.org/docs/user-guide/configuring#specifying-parser-options).
================================================
FILE: docs/ru/options.md
================================================
<p align="right">
<a href="../en/options.md">English description</a> | Описание на русском
</p>
# Опции
Вся конфигураци сборщика находится в одном файле — tars-config.js в корне проекта.
Нужно перезапустить сборку, чтобы изменения применились.
## Изменяемые опции
### postcss
Type: `Array`
Default: `[]`
Example:
````javascript
postcss: [
{
name: 'postcss-short',
options: {
deny: ['text']
}
}, {
name: 'postcss-size',
options: {}
}
]
````
Здесь можно перечислить используемые постпроцессоры. Обязательно выполните установку используемых постпроцессоров.
### svg
Type: `Object`
Конфиг для работы с svg-графикой в TARS.
#### active
Type: `Boolean`
Default: `true`
Включение поддержки svg в проекте.
#### workflow
Type: `String`
Default: `sprite`
Способ работы с svg-графикой. Доступны SVG-спрайт и SVG-symbols.
Поддерживаются значения `sprite` для использования SVG-спрайтов и `symbols` для svg-symbols.
**При выборе "symbols", сборка для IE8 недоступна**
#### symbolsConfig
Type: `Object`
Описывает конфиг для работы с svg-symbols.
##### loadingType
Type: `String`
Default: `inject`
Устанавливает способ подключения svg-symbols на странице.
Поддерживаются значения:
* `inject` — инжект в тело HTML;
* `separate-file` — хранение в отдельном файле;
* `separate-file-with-link` — хранение в отдельном файле, при этом каждая иконка подключается из этого файла.
##### usePolyfillForExternalSymbols
Type: `Boolean`
Default: `true`
Хранение в отдельном файле нативно поддерживается во всех современных браузерах, кроме IE9 - Edge. Для них используется полифл. Если вы не поддерживаете эти браузеры, то можете выставить false.
##### pathToExternalSymbolsFile
Type: `String`
Default: `''`
Вы можете задать путь, по которому файл с svg-symbols будет находится в проекте. По умолчанию файл создается в корне готовой сборки.
Пример значения: `static/images/`.
### css
Type: `Object`
Конфиг для работы с CSS в TARS. Доступен с версии TARS 1.8.0.
#### workflow
Type: `String`
Default: `concat`
Способ обработки CSS-кода.
Доступны:
* `concat` — конкатенация CSS-файлов в один в определенном порядке;
* `manual` — использование точек входа (основных файлов), в которые импортируются файлы стилей проекта.
### js
Type: `Object`
Конфиг для работы с JavaScript в TARS. Доступен с версии TARS 1.7.0.
#### workflow
Type: `String`
Default: `concat`
Способ обработки JavaScript-кода.
Доступны:
* `concat` — конкатенация JavaScript-файлов в один в определенном порядке;
* `modular` — использование бандлера, который будет разрешать зависимости между JavaScript-файлами.
#### bundler
Type: `String`
Default: `webpack`
В bundler можно указать используемый сборщик JavaScript-кода, если в качестве workflow был выбран `modular`.
Пока что доступен только `webpack`.
#### lint
Type: `Boolean`
Default: `true`
Включение проверки ошибок в JavaScript-коде и code-style (опции для eslint находятся в корне, в файле `.eslintrc`. Весь список доступных опций можно найти [тут](http://eslint.org/)). Также, вы можете точечно отключить линтинг файлов используя `.eslintignore` в корне проекта.
#### useBabel
Type: `Boolean`
Default: `false`
Данная опция позволяет использовать [Babel](https://babeljs.io/) для поддержки ES6(ES7) синтаксиса. Конфиг для babel находит в корне проекта, в файле `.babelrc`. С доступными опциями .babelc можно ознакомится на [официальном сайте](https://babeljs.io/docs/usage/options/). Вам не нужно задавать опции 'filename' и все что связанно с 'sourcemaps', так как эти оцпии уже заданы в сборщике.
#### webpack
Type: `Object`
Здесь можно управлять подключением особенных фич для webpack.
##### useHMR
Type: `Boolean`
Default: `false`
Включение технологии горячей замены компонентов ([Hot module replacement](https://webpack.github.io/docs/hot-module-replacement.html)).
##### providePlugin
Type: `Object`
Default: `{}`
Параметры для [Provide Plugin](https://webpack.github.io/docs/list-of-plugins.html#provideplugin). Автоматически загружаемые модули.
#### removeConsoleLog
Type: `Boolean`
Default: `true`
Удаление console.log, alert и debugger из JavaScript-файлов в сборке. Является опцией, так как иногда требуется оставить console.log в готовой сборке.
#### jsPathsToConcatBeforeModulesJs и jsPathsToConcatAfterModulesJs
Type: `Array of Strings`
Default: `[]`
Данная опция имеет смысл только при выборе concat в качестве workflow. В этом случае весь JavaScript-код проекта собирается в 1 файл, кроме javascript-файлов, которые находятся в директории separate-js. Если необходимо включить в сборку файлы из других мест (например, вы создали отдельную директорию для JavaScript-файлов), то можно прописать в эту опцию путь или массив путей (паттернов путей, типа controllers/\*\*/\*.js) до JavaScript-файлов, которые должны попасть в сборку до js-компонентов (jsPathsToConcatBeforeModulesJs) и JavaScript-файлов, которые должны быть подключены после JavaScript-файлов компонентов (jsPathsToConcatAfterModulesJs).
Это будет полезно, при разработке сайта на JavaScript-фреймвор
gitextract_x9whm8un/ ├── .babelrc ├── .browserslistrc ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── README_RU.md ├── appveyor.yml ├── docs/ │ ├── en/ │ │ ├── changelog.md │ │ ├── css-concat-processing.md │ │ ├── css-manual-processing.md │ │ ├── css-processing.md │ │ ├── faq.md │ │ ├── file-structure.md │ │ ├── fonts-and-misc.md │ │ ├── handlebars-helpers.md │ │ ├── html-processing.md │ │ ├── images-processing.md │ │ ├── js-concat-processing.md │ │ ├── js-processing.md │ │ ├── js-webpack-processing.md │ │ ├── options.md │ │ ├── plugins-options.md │ │ ├── scenarios.md │ │ ├── svg-processing.md │ │ ├── tasks-and-watchers.md │ │ ├── tasks.md │ │ ├── update-guide.md │ │ └── watchers.md │ └── ru/ │ ├── changelog.md │ ├── css-concat-processing.md │ ├── css-manual-processing.md │ ├── css-processing.md │ ├── faq.md │ ├── file-structure.md │ ├── fonts-and-misc.md │ ├── for-contributors.md │ ├── handlebars-helpers.md │ ├── html-processing.md │ ├── images-processing.md │ ├── js-concat-processing.md │ ├── js-processing.md │ ├── js-webpack-processing.md │ ├── options.md │ ├── plugins-options.md │ ├── scenarios.md │ ├── svg-processing.md │ ├── tasks-and-watchers.md │ ├── tasks.md │ ├── update-guide.md │ └── watchers.md ├── gulpfile.js ├── markup/ │ ├── components/ │ │ └── _template/ │ │ ├── _template.js │ │ └── data/ │ │ └── data.js │ └── static/ │ ├── js/ │ │ └── main.js │ └── misc/ │ └── humans.txt ├── package.json ├── plugins-config.json ├── prettier.config.js ├── tars/ │ ├── helpers/ │ │ ├── filter-files-by-path.js │ │ ├── get-templater-name.js │ │ ├── install-additional-deps.js │ │ ├── modify-date-formatter.js │ │ ├── notifier.js │ │ ├── plugins-config-processing.js │ │ ├── set-build-version.js │ │ ├── set-ulimit.js │ │ ├── skip-task-with-empty-pipe.js │ │ ├── start-screen-generator.js │ │ ├── string-helper.js │ │ ├── tars-fs-helper.js │ │ └── watcher-log.js │ ├── tars.js │ ├── tasks/ │ │ ├── css/ │ │ │ ├── compile-css-for-ie8.js │ │ │ ├── compile-css-for-ie9.js │ │ │ ├── compile-css.js │ │ │ ├── compress-css.js │ │ │ ├── helpers/ │ │ │ │ ├── actions-on-sprite-task-skipping.js │ │ │ │ ├── concat-compile-css-task-template.js │ │ │ │ ├── manual-compile-css-task-template.js │ │ │ │ └── sprite-mixins/ │ │ │ │ ├── less-raster-sprite-mixins.less │ │ │ │ ├── less-svg-fallback-sprite-mixins.less │ │ │ │ ├── less-svg-sprite-mixins.less │ │ │ │ ├── scss-raster-sprite-mixins.scss │ │ │ │ ├── scss-svg-fallback-sprite-mixins.scss │ │ │ │ ├── scss-svg-sprite-mixins.scss │ │ │ │ ├── stylus-raster-sprite-mixins.styl │ │ │ │ ├── stylus-svg-fallback-sprite-mixins.styl │ │ │ │ └── stylus-svg-sprite-mixins.styl │ │ │ ├── make-fallback-for-svg.js │ │ │ ├── make-sprite-for-svg.js │ │ │ ├── make-sprite.js │ │ │ └── move-separate.js │ │ ├── html/ │ │ │ ├── compile-templates.js │ │ │ ├── concat-mocks-data.js │ │ │ ├── helpers/ │ │ │ │ ├── generate-static-path.js │ │ │ │ ├── handlebars-helpers.js │ │ │ │ ├── jade-helpers.js │ │ │ │ ├── pages-and-data-files-processing.js │ │ │ │ ├── pug-helpers.js │ │ │ │ └── utils/ │ │ │ │ ├── dates.js │ │ │ │ └── utils.js │ │ │ └── modify-html.js │ │ ├── images/ │ │ │ ├── helpers/ │ │ │ │ └── symbols-data-template.js │ │ │ ├── make-symbols-sprite.js │ │ │ ├── minify-images.js │ │ │ ├── minify-svg.js │ │ │ ├── move-content-img.js │ │ │ ├── move-general-img.js │ │ │ ├── move-plugins-img.js │ │ │ └── raster-svg.js │ │ ├── js/ │ │ │ ├── check.js │ │ │ ├── concat-processing.js │ │ │ ├── helpers/ │ │ │ │ └── separate-files-filter.js │ │ │ ├── move-separate.js │ │ │ ├── processing.js │ │ │ └── webpack-processing.js │ │ ├── main/ │ │ │ ├── build-dev.js │ │ │ ├── build.js │ │ │ ├── create-build.js │ │ │ └── dev.js │ │ ├── other/ │ │ │ ├── move-assets.js │ │ │ ├── move-fonts.js │ │ │ └── move-misc-files.js │ │ └── services/ │ │ ├── clean.js │ │ ├── create-fs.js │ │ ├── init.js │ │ ├── remove-init-fs.js │ │ ├── update-deps.js │ │ └── zip-build.js │ ├── user-tasks/ │ │ ├── example-task.js │ │ └── html/ │ │ └── helpers/ │ │ ├── handlebars-helpers.js │ │ ├── jade-helpers.js │ │ ├── modify-options.js │ │ └── pug-helpers.js │ ├── user-watchers/ │ │ └── example-watcher.js │ └── watchers/ │ ├── css/ │ │ ├── common-css.js │ │ ├── ie8-css.js │ │ ├── ie9-css.js │ │ └── modules-css.js │ ├── js/ │ │ └── all.js │ ├── move/ │ │ ├── assets.js │ │ ├── content-img.js │ │ ├── fonts.js │ │ ├── general-img.js │ │ ├── misc-files.js │ │ ├── plugins-img.js │ │ ├── separate-css.js │ │ └── separate-js.js │ ├── sprite/ │ │ ├── png-sprites.js │ │ ├── svg-sprites.js │ │ └── symbols.js │ └── templates/ │ ├── data-files.js │ └── page-modules.js ├── tars-config.js ├── tars.json ├── templates/ │ ├── handlebars/ │ │ └── markup/ │ │ ├── components/ │ │ │ ├── _template/ │ │ │ │ └── _template.html │ │ │ ├── default_component_scheme.json │ │ │ ├── example/ │ │ │ │ └── example.html │ │ │ ├── footer/ │ │ │ │ └── footer.html │ │ │ └── head/ │ │ │ ├── data/ │ │ │ │ └── data.js │ │ │ └── head.html │ │ └── pages/ │ │ ├── _template.html │ │ └── index.html │ ├── jade/ │ │ └── markup/ │ │ ├── components/ │ │ │ ├── _template/ │ │ │ │ └── _template.jade │ │ │ ├── default_component_scheme.json │ │ │ ├── example/ │ │ │ │ └── example.jade │ │ │ ├── footer/ │ │ │ │ └── footer.jade │ │ │ └── head/ │ │ │ ├── data/ │ │ │ │ └── data.js │ │ │ └── head.jade │ │ └── pages/ │ │ ├── _template.jade │ │ └── index.jade │ ├── less/ │ │ └── markup/ │ │ ├── components/ │ │ │ └── _template/ │ │ │ └── _template.less │ │ └── static/ │ │ └── less/ │ │ ├── GUI.less │ │ ├── common.less │ │ ├── entry/ │ │ │ ├── built-in-partials/ │ │ │ │ ├── _service-ie8.less │ │ │ │ └── _service.less │ │ │ ├── ie/ │ │ │ │ ├── main_ie8.less │ │ │ │ └── main_ie9.less │ │ │ ├── main.less │ │ │ └── partials/ │ │ │ ├── _components-ie8.less │ │ │ ├── _components-ie9.less │ │ │ ├── _components.less │ │ │ ├── _libraries.less │ │ │ └── _plugins.less │ │ ├── etc/ │ │ │ └── etc.less │ │ ├── fonts.less │ │ ├── libraries/ │ │ │ └── library-sample.less │ │ ├── mixins.less │ │ ├── normalize.less │ │ ├── plugins/ │ │ │ └── sample-plugin.less │ │ ├── separate-css/ │ │ │ └── separate-css-sample.css │ │ ├── sprite-generator-templates/ │ │ │ ├── less.sprite.mustache │ │ │ ├── less.svg-fallback-sprite.mustache │ │ │ └── less.svg-sprite.mustache │ │ ├── sprites-less/ │ │ │ ├── sprite-png-ie.less │ │ │ └── sprite-png.less │ │ └── vars.less │ ├── pug/ │ │ └── markup/ │ │ ├── components/ │ │ │ ├── _template/ │ │ │ │ └── _template.pug │ │ │ ├── default_component_scheme.json │ │ │ ├── example/ │ │ │ │ └── example.pug │ │ │ ├── footer/ │ │ │ │ └── footer.pug │ │ │ └── head/ │ │ │ ├── data/ │ │ │ │ └── data.js │ │ │ └── head.pug │ │ └── pages/ │ │ ├── _template.pug │ │ └── index.pug │ ├── scss/ │ │ └── markup/ │ │ ├── components/ │ │ │ └── _template/ │ │ │ └── _template.scss │ │ └── static/ │ │ └── scss/ │ │ ├── GUI.scss │ │ ├── common.scss │ │ ├── entry/ │ │ │ ├── built-in-partials/ │ │ │ │ ├── _service-ie8.scss │ │ │ │ └── _service.scss │ │ │ ├── ie/ │ │ │ │ ├── main_ie8.scss │ │ │ │ └── main_ie9.scss │ │ │ ├── main.scss │ │ │ └── partials/ │ │ │ ├── _components-ie8.scss │ │ │ ├── _components-ie9.scss │ │ │ ├── _components.scss │ │ │ ├── _libraries.scss │ │ │ └── _plugins.scss │ │ ├── etc/ │ │ │ └── etc.scss │ │ ├── fonts.scss │ │ ├── libraries/ │ │ │ └── library-sample.scss │ │ ├── mixins.scss │ │ ├── normalize.scss │ │ ├── plugins/ │ │ │ └── sample-plugin.scss │ │ ├── separate-css/ │ │ │ └── separate-css-sample.css │ │ ├── sprite-generator-templates/ │ │ │ ├── scss.sprite.mustache │ │ │ ├── scss.svg-fallback-sprite.mustache │ │ │ └── scss.svg-sprite.mustache │ │ ├── sprites-scss/ │ │ │ └── sprite-ie.scss │ │ └── vars.scss │ └── stylus/ │ └── markup/ │ ├── components/ │ │ └── _template/ │ │ └── _template.styl │ └── static/ │ └── stylus/ │ ├── GUI.styl │ ├── common.styl │ ├── entry/ │ │ ├── built-in-partials/ │ │ │ ├── _service-ie8.styl │ │ │ └── _service.styl │ │ ├── ie/ │ │ │ ├── main_ie8.styl │ │ │ └── main_ie9.styl │ │ ├── main.styl │ │ └── partials/ │ │ ├── _components-ie8.styl │ │ ├── _components-ie9.styl │ │ ├── _components.styl │ │ ├── _libraries.styl │ │ └── _plugins.styl │ ├── etc/ │ │ └── etc.styl │ ├── fonts.styl │ ├── libraries/ │ │ └── library-sample.styl │ ├── mixins.styl │ ├── normalize.styl │ ├── plugins/ │ │ └── sample-plugin.styl │ ├── separate-css/ │ │ └── separate-css-sample.css │ ├── sprite-generator-templates/ │ │ ├── stylus.sprite.mustache │ │ ├── stylus.svg-fallback-sprite.mustache │ │ └── stylus.svg-sprite.mustache │ ├── sprites-stylus/ │ │ ├── sprite-png-ie.styl │ │ └── sprite-png.styl │ └── vars.styl ├── user-package.json └── webpack.config.js
SYMBOL INDEX (69 symbols across 40 files)
FILE: tars/helpers/modify-date-formatter.js
function formatTime (line 8) | function formatTime(timeItem) {
method getTimeOfModify (line 20) | getTimeOfModify() {
FILE: tars/helpers/notifier.js
function cutUselessLog (line 8) | function cutUselessLog(error) {
method error (line 22) | error(message, error, params) {
method success (line 60) | success(message, params) {
FILE: tars/helpers/string-helper.js
method capitalizeFirstLetter (line 14) | capitalizeFirstLetter(str) {
FILE: tars/helpers/tars-fs-helper.js
function isValidFile (line 17) | function isValidFile(pathToFile, file) {
function getFilesFromDir (line 27) | function getFilesFromDir(dir) {
function getReadyUniqueItemsArray (line 53) | function getReadyUniqueItemsArray(systemItems, usersItems) {
method getTasks (line 64) | getTasks() {
method getWatchers (line 76) | getWatchers() {
FILE: tars/tars.js
function tarsRequire (line 12) | function tarsRequire(packageName) {
FILE: tars/tasks/css/compress-css.js
method errorHandler (line 15) | errorHandler(error) {
FILE: tars/tasks/css/helpers/concat-compile-css-task-template.js
method errorHandler (line 162) | errorHandler(error) {
FILE: tars/tasks/css/helpers/manual-compile-css-task-template.js
method errorHandler (line 72) | errorHandler(error) {
FILE: tars/tasks/css/make-fallback-for-svg.js
function actionsOnTaskSkipping (line 23) | function actionsOnTaskSkipping() {
method errorHandler (line 44) | errorHandler(error) {
FILE: tars/tasks/css/make-sprite-for-svg.js
function actionsOnTaskSkipping (line 24) | function actionsOnTaskSkipping() {
method errorHandler (line 38) | errorHandler(error) {
FILE: tars/tasks/css/make-sprite.js
function actionsOnTaskSkipping (line 33) | function actionsOnTaskSkipping() {
method errorHandler (line 52) | errorHandler(error) {
FILE: tars/tasks/css/move-separate.js
method errorHandler (line 17) | errorHandler(error) {
FILE: tars/tasks/html/compile-templates.js
function traverseThroughObject (line 24) | function traverseThroughObject(obj, fullData) {
function concatComponentsData (line 42) | function concatComponentsData() {
function jadeAndPugInheritanceProcessing (line 149) | function jadeAndPugInheritanceProcessing() {
method errorHandler (line 201) | errorHandler(pipeError) {
FILE: tars/tasks/html/concat-mocks-data.js
method errorHandler (line 27) | errorHandler(error) {
FILE: tars/tasks/html/helpers/generate-static-path.js
function getStaticPrefix (line 12) | function getStaticPrefix(pageDepth) {
FILE: tars/tasks/html/helpers/handlebars-helpers.js
method repeat (line 15) | repeat(n, options) {
method is (line 36) | is(leftOperand, operation, rightOperand, options) {
method toLowerCase (line 140) | toLowerCase(str) {
method toUpperCase (line 151) | toUpperCase(str) {
method capitalizeFirst (line 162) | capitalizeFirst(str) {
method strip (line 173) | strip(options) {
method Icon (line 196) | Icon(options) {
method formatDate (line 237) | formatDate(date, format) {
method now (line 246) | now(format) {
method i18n (line 264) | i18n(context, options) {
FILE: tars/tasks/html/helpers/jade-helpers.js
method Icon (line 15) | Icon(options) {
FILE: tars/tasks/html/helpers/pages-and-data-files-processing.js
function dataFileProcessing (line 14) | function dataFileProcessing(content) {
FILE: tars/tasks/html/helpers/pug-helpers.js
method Icon (line 15) | Icon(options) {
FILE: tars/tasks/html/helpers/utils/utils.js
method isUndefined (line 10) | isUndefined(value) {
method castToString (line 14) | castToString(value) {
FILE: tars/tasks/html/modify-html.js
method errorHandler (line 27) | errorHandler(error) {
FILE: tars/tasks/images/make-symbols-sprite.js
method errorHandler (line 27) | errorHandler(error) {
FILE: tars/tasks/images/minify-images.js
method errorHandler (line 28) | errorHandler(error) {
FILE: tars/tasks/images/minify-svg.js
method errorHandler (line 22) | errorHandler(error) {
FILE: tars/tasks/images/move-content-img.js
method errorHandler (line 25) | errorHandler(error) {
FILE: tars/tasks/images/move-general-img.js
method errorHandler (line 25) | errorHandler(error) {
FILE: tars/tasks/images/move-plugins-img.js
method errorHandler (line 25) | errorHandler(error) {
FILE: tars/tasks/images/raster-svg.js
method errorHandler (line 20) | errorHandler(error) {
FILE: tars/tasks/js/check.js
method errorHandler (line 38) | errorHandler() {
FILE: tars/tasks/js/concat-processing.js
function base (line 41) | function base() {
function compress (line 60) | function compress() {
method errorHandler (line 100) | errorHandler(error) {
FILE: tars/tasks/js/move-separate.js
method errorHandler (line 18) | errorHandler(error) {
FILE: tars/tasks/main/create-build.js
method errorHandler (line 14) | errorHandler(error) {
FILE: tars/tasks/main/dev.js
function setWatchMode (line 11) | function setWatchMode(cb) {
function devTaskFinallyActions (line 24) | function devTaskFinallyActions(done) {
FILE: tars/tasks/other/move-assets.js
method errorHandler (line 22) | errorHandler(error) {
FILE: tars/tasks/other/move-fonts.js
method errorHandler (line 18) | errorHandler(error) {
FILE: tars/tasks/other/move-misc-files.js
method errorHandler (line 15) | errorHandler(error) {
FILE: tars/tasks/services/init.js
function applyTemplates (line 25) | function applyTemplates(type) {
function generateStartScreen (line 95) | function generateStartScreen() {
function removeTemplatesFolders (line 140) | function removeTemplatesFolders() {
function finishInit (line 151) | function finishInit() {
FILE: tars/tasks/services/update-deps.js
function downloadNewPackageJson (line 22) | function downloadNewPackageJson() {
FILE: tars/tasks/services/zip-build.js
method errorHandler (line 20) | errorHandler(error) {
FILE: webpack.config.js
function prepareEntryPoints (line 95) | function prepareEntryPoints(entryConfig) {
Condensed preview — 262 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (554K chars).
[
{
"path": ".babelrc",
"chars": 193,
"preview": "{\n \"presets\": [\"@babel/preset-env\"],\n \"ignore\": [\n \"**/babel_ignore_*.js\",\n \"*/js/framework/*.js\",\n \"*/js/lib"
},
{
"path": ".browserslistrc",
"chars": 43,
"preview": "> 1%\nlast 2 versions\nFirefox ESR\nandroid 4\n"
},
{
"path": ".editorconfig",
"chars": 299,
"preview": "# editorconfig.org\nroot = true\n\n[*]\nindent_style = space\nindent_size = 4\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_"
},
{
"path": ".eslintignore",
"chars": 29,
"preview": "**/_*.js\nplugins-config.json\n"
},
{
"path": ".eslintrc",
"chars": 3544,
"preview": "{\n\n \"root\": true,\n\n \"env\": {\n \"node\": true,\n \"browser\": true,\n \"commonjs\": true,\n \"jqu"
},
{
"path": ".gitignore",
"chars": 186,
"preview": "node_modules\ndev\n.DS_Store\n._.DS_Store\n\n.tmpTemplater\n.tmpPreproc\n\n.idea\nnpm-debug.log\nphantomjsdriver.log\n/nbproject/*\n"
},
{
"path": ".travis.yml",
"chars": 660,
"preview": "language: c\n\nos:\n - linux\n - osx\n\nenv:\n matrix:\n - export NODE_VERSION=\"16\"\n\nmatrix:\n fast_finish: tr"
},
{
"path": "LICENSE",
"chars": 1134,
"preview": "The MIT License (MIT)\n\nCopyright (c) 2014-2016, Malko Artem <artem.malko@gmail.com>, <tars.builder@gmail.com>\n\nPermissio"
},
{
"path": "README.md",
"chars": 11041,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"README_RU.md\">Описание на русском</a>\n</p>\n\n# Maintainer is needed!\n\n# "
},
{
"path": "README_RU.md",
"chars": 11461,
"preview": "<p align=\"right\">\n<a href=\"README.md\">English description</a> | Описание на русском\n</p>\n\n# Ищем Maintainer'ов\n\n# ![Tars"
},
{
"path": "appveyor.yml",
"chars": 595,
"preview": "# AppVeyor file\n# http://www.appveyor.com/docs/appveyor-yml\n\n# Build version format\nversion: '{build}'\n\nplatform:\n - "
},
{
"path": "docs/en/changelog.md",
"chars": 13680,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/changelog.md\">Описание на русском</a>\n</p>\n\n# Changelog\n\n## Versi"
},
{
"path": "docs/en/css-concat-processing.md",
"chars": 867,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/css-concat-processing.md\">Описание на русском</a>\n</p>\n\n# CSS con"
},
{
"path": "docs/en/css-manual-processing.md",
"chars": 2328,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/css-manual-processing.md\">Описание на русском</a>\n</p>\n\n# CSS man"
},
{
"path": "docs/en/css-processing.md",
"chars": 3523,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/css-processing.md\">Описание на русском</a>\n</p>\n\n# CSS\n\nYou can u"
},
{
"path": "docs/en/faq.md",
"chars": 4233,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/faq.md\">Описание на русском</a>\n</p>\n\n# FAQ\n\nFor all questions I "
},
{
"path": "docs/en/file-structure.md",
"chars": 9370,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/file-structure.md\">Описание на русском</a>\n</p>\n\n# File structure"
},
{
"path": "docs/en/fonts-and-misc.md",
"chars": 439,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/fonts-and-misc.md\">Описание на русском</a>\n</p>\n\n# Working with f"
},
{
"path": "docs/en/handlebars-helpers.md",
"chars": 2427,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/handlebars-helpers.md\">Описание на русском</a>\n</p>\n\n# Handlebars"
},
{
"path": "docs/en/html-processing.md",
"chars": 8430,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/html-processing.md\">Описание на русском</a>\n</p>\n\n# HTML\n\n[Jade]("
},
{
"path": "docs/en/images-processing.md",
"chars": 6148,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/images-processing.md\">Описание на русском</a>\n</p>\n\n# Images\n\nAll"
},
{
"path": "docs/en/js-concat-processing.md",
"chars": 1592,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/js-concat-processing.md\">Описание на русском</a>\n</p>\n\n# JS-proce"
},
{
"path": "docs/en/js-processing.md",
"chars": 1388,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/js-processing.md\">Описание на русском</a>\n</p>\n\n# JS-processing\n\n"
},
{
"path": "docs/en/js-webpack-processing.md",
"chars": 3090,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/js-webpack-processing.md\">Описание на русском</a>\n</p>\n\n# JS-proc"
},
{
"path": "docs/en/options.md",
"chars": 12996,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/options.md\">Описание на русском</a>\n</p>\n\n# Options\n\nAll builder "
},
{
"path": "docs/en/plugins-options.md",
"chars": 1606,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/plugins-options.md\">Описание на русском</a>\n</p>\n\n# Plugins confi"
},
{
"path": "docs/en/scenarios.md",
"chars": 1747,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/scenarios.md\">Описание на русском</a>\n</p>\n\n# Usage scenarios\n\nTh"
},
{
"path": "docs/en/svg-processing.md",
"chars": 5620,
"preview": "\n<p align=\"right\">\nEnglish description | <a href=\"../ru/svg-processing.md\">Описание на русском</a>\n</p>\n\n# Working with "
},
{
"path": "docs/en/tasks-and-watchers.md",
"chars": 2501,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/tasks-and-watchers.md\">Описание на русском</a>\n</p>\n\n# Tasks and "
},
{
"path": "docs/en/tasks.md",
"chars": 2854,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/tasks.md\">Описание на русском</a>\n</p>\n\n# Tasks\n\nEach task is a ["
},
{
"path": "docs/en/update-guide.md",
"chars": 2200,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/update-guide.md\">Описание на русском</a>\n</p>\n\n# TARS update guid"
},
{
"path": "docs/en/watchers.md",
"chars": 2428,
"preview": "<p align=\"right\">\nEnglish description | <a href=\"../ru/watchers.md\">Описание на русском</a>\n</p>\n\n# Watchers\n\nAs tasks, "
},
{
"path": "docs/ru/changelog.md",
"chars": 17344,
"preview": "<p align=\"right\">\n<a href=\"../en/changelog.md\">English description</a> | Описание на русском\n</p>\n\n# Changelog\n\n## Versi"
},
{
"path": "docs/ru/css-concat-processing.md",
"chars": 997,
"preview": "<p align=\"right\">\n<a href=\"../en/css-concat-processing.md\">English description</a> | Описание на русском\n</p>\n\n# CSS con"
},
{
"path": "docs/ru/css-manual-processing.md",
"chars": 2714,
"preview": "<p align=\"right\">\n<a href=\"../en/css-manual-processing.md\">English description</a> | Описание на русском\n</p>\n\n# CSS man"
},
{
"path": "docs/ru/css-processing.md",
"chars": 3671,
"preview": "<p align=\"right\">\n<a href=\"../en/css-processing.md\">English description</a> | Описание на русском\n</p>\n\n# CSS\n\nВ качеств"
},
{
"path": "docs/ru/faq.md",
"chars": 5110,
"preview": "<p align=\"right\">\n<a href=\"../en/faq.md\">English description</a> | Описание на русском\n</p>\n\n# FAQ\n\nПо всем вопросам мож"
},
{
"path": "docs/ru/file-structure.md",
"chars": 10052,
"preview": "<p align=\"right\">\n<a href=\"../en/file-structure.md\">English description</a> | Описание на русском\n</p>\n\n# Файловая струк"
},
{
"path": "docs/ru/fonts-and-misc.md",
"chars": 465,
"preview": "<p align=\"right\">\n<a href=\"../en/fonts-and-misc.md\">English description</a> | Описание на русском\n</p>\n\n# Работы со шриф"
},
{
"path": "docs/ru/for-contributors.md",
"chars": 4110,
"preview": "# Руководство для контрибьютеров\n\n## Code style\n\nЗа основу берем [Airbnb JavaScript Style Guide](https://github.com/airb"
},
{
"path": "docs/ru/handlebars-helpers.md",
"chars": 2543,
"preview": "<p align=\"right\">\n<a href=\"../en/handlebars-helpers.md\">English description</a> | Описание на русском\n</p>\n\n# Handlebars"
},
{
"path": "docs/ru/html-processing.md",
"chars": 9184,
"preview": "<p align=\"right\">\n<a href=\"../en/html-processing.md\">English description</a> | Описание на русском\n</p>\n\n# HTML\n\nВ качес"
},
{
"path": "docs/ru/images-processing.md",
"chars": 7054,
"preview": "<p align=\"right\">\n<a href=\"../en/images-processing.md\">English description</a> | Описание на русском\n</p>\n\n# Images\n\nВсю"
},
{
"path": "docs/ru/js-concat-processing.md",
"chars": 1542,
"preview": "<p align=\"right\">\n<a href=\"../en/js-concat-processing.md\">English description</a> | Описание на русском\n</p>\n\n# Работа с"
},
{
"path": "docs/ru/js-processing.md",
"chars": 1510,
"preview": "<p align=\"right\">\n<a href=\"../en/js-processing.md\">English description</a> | Описание на русском\n</p>\n\n# Работа с JS\n\nВ "
},
{
"path": "docs/ru/js-webpack-processing.md",
"chars": 3833,
"preview": "<p align=\"right\">\n<a href=\"../en/js-webpack-processing.md\">English description</a> | Описание на русском\n</p>\n\n# Работа "
},
{
"path": "docs/ru/options.md",
"chars": 13309,
"preview": "<p align=\"right\">\n<a href=\"../en/options.md\">English description</a> | Описание на русском\n</p>\n\n# Опции\n\nВся конфигурац"
},
{
"path": "docs/ru/plugins-options.md",
"chars": 1788,
"preview": "<p align=\"right\">\n<a href=\"../en/plugins-options.md\">English description</a> | Описание на русском\n</p>\n\n# Конфигурирова"
},
{
"path": "docs/ru/scenarios.md",
"chars": 1817,
"preview": "<p align=\"right\">\n<a href=\"../en/scenarios.md\">English description</a> | Описание на русском\n</p>\n\n# Сценарии использова"
},
{
"path": "docs/ru/svg-processing.md",
"chars": 6473,
"preview": "<p align=\"right\">\n<a href=\"../en/svg-processing.md\">English description</a> | Описание на русском\n</p>\n\n# Работа с SVG\n\n"
},
{
"path": "docs/ru/tasks-and-watchers.md",
"chars": 2632,
"preview": "<p align=\"right\">\n<a href=\"../en/tasks-and-watchers.md\">English description</a> | Описание на русском\n</p>\n\n# Работа с т"
},
{
"path": "docs/ru/tasks.md",
"chars": 3154,
"preview": "<p align=\"right\">\n<a href=\"../en/tasks.md\">English description</a> | Описание на русском\n</p>\n\n# Таски в TARS\n\nКаждый та"
},
{
"path": "docs/ru/update-guide.md",
"chars": 2515,
"preview": "<p align=\"right\">\n<a href=\"../en/update-guide.md\">English description</a> | Описание на русском\n</p>\n\n# Руководство по о"
},
{
"path": "docs/ru/watchers.md",
"chars": 2586,
"preview": "<p align=\"right\">\n<a href=\"../en/watchers.md\">English description</a> | Описание на русском\n</p>\n\n# Вотчеры в TARS\n\nКак "
},
{
"path": "gulpfile.js",
"chars": 1120,
"preview": "'use strict';\n\n// Tars main-module init\n// It is a global var\nrequire('./tars/tars');\n\nconst gulp = tars.packages.gulp;\n"
},
{
"path": "markup/components/_template/_template.js",
"chars": 0,
"preview": ""
},
{
"path": "markup/components/_template/data/data.js",
"chars": 234,
"preview": "/* Module data structure */\n\n// moduleName: {\n// dataType: {\n// property: value\n// }\n// }\n\n/* Module dat"
},
{
"path": "markup/static/js/main.js",
"chars": 76,
"preview": "'use strict';\n\n/*\n This file can be used as entry point for webpack!\n */\n"
},
{
"path": "markup/static/misc/humans.txt",
"chars": 164,
"preview": "# humanstxt.org/\n# The humans responsible & technologies\n\n# TEAM\n\n <name> -- <role> -- <twitter>\n\n# THANKS\n\n <name"
},
{
"path": "package.json",
"chars": 3025,
"preview": "{\n \"name\": \"tars\",\n \"version\": \"1.15.1\",\n \"engines\": {\n \"node\": \"^16.x.x\"\n },\n \"os\": [\n \"darwin\",\n \"linux\""
},
{
"path": "plugins-config.json",
"chars": 3183,
"preview": "{\n // You can find docs for this file here: ./docs/en|ru/plugins-options.md\n\n \"browserSync\": {\n \"startPath\""
},
{
"path": "prettier.config.js",
"chars": 135,
"preview": "module.exports = {\n singleQuote: true,\n trailingComma: 'all',\n arrowParens: 'always',\n printWidth: 110,\n "
},
{
"path": "tars/helpers/filter-files-by-path.js",
"chars": 674,
"preview": "'use strict';\n\nconst through2 = tars.packages.through2;\n\n/**\n * Filter files in pipe via it's path\n */\nmodule.exports = "
},
{
"path": "tars/helpers/get-templater-name.js",
"chars": 443,
"preview": "'use strict';\n\n/**\n * Get correct templater name\n * @return {string} Templater name\n */\nmodule.exports = function getTem"
},
{
"path": "tars/helpers/install-additional-deps.js",
"chars": 983,
"preview": "'use strict';\n\n// It is a global var\nrequire('../tars');\n\nconst exec = require('child_process').exec;\nlet usersDeps;\n\ntr"
},
{
"path": "tars/helpers/modify-date-formatter.js",
"chars": 791,
"preview": "'use strict';\n\n/**\n * Date formatter for Gulp notify. It showes only hours, minutes and seconds\n * @param {number} time"
},
{
"path": "tars/helpers/notifier.js",
"chars": 2875,
"preview": "'use strict';\n\nconst notify = tars.packages.notify;\nconst gutil = tars.packages.gutil;\nconst notifyConfig = tars.config."
},
{
"path": "tars/helpers/plugins-config-processing.js",
"chars": 603,
"preview": "'use strict';\n\nconst json = tars.require('comment-json');\nconst fs = require('fs');\nconst cwd = process.cwd();\n\n/**\n * E"
},
{
"path": "tars/helpers/set-build-version.js",
"chars": 346,
"preview": "'use strict';\n\n/**\n * Generate build version\n * @return {String} build version\n */\nmodule.exports = function setBuildVer"
},
{
"path": "tars/helpers/set-ulimit.js",
"chars": 519,
"preview": "'use strict';\n\n/**\n * Set ulimit to tars.config.ulimit\n * @return {Boolean}\n */\nmodule.exports = function setUlimit() {\n"
},
{
"path": "tars/helpers/skip-task-with-empty-pipe.js",
"chars": 833,
"preview": "'use strict';\n\nconst through2 = tars.packages.through2;\n\n/**\n * Skip task if there are no any files in pipe\n * @param {"
},
{
"path": "tars/helpers/start-screen-generator.js",
"chars": 2384,
"preview": "'use strict';\n\n/**\n * Output in the begining\n * @param {Object} gutil Utils for gulp\n */\nmodule.exports = gutil => {\n "
},
{
"path": "tars/helpers/string-helper.js",
"chars": 476,
"preview": "'use strict';\n\n/**\n * Helper for watcher logging\n * @param {String} event Type of event\n * @param {String} path Path "
},
{
"path": "tars/helpers/tars-fs-helper.js",
"chars": 2600,
"preview": "'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\n\n/**\n * Check, that file is task or watcher\n * Al"
},
{
"path": "tars/helpers/watcher-log.js",
"chars": 318,
"preview": "'use strict';\n\nconst gutil = tars.packages.gutil;\n\n/**\n * Helper for watcher logging\n * @param {String} event Type of e"
},
{
"path": "tars/tars.js",
"chars": 10310,
"preview": "'use strict';\n\n/**\n * Main module for TARS\n */\n\n/**\n * Reqiure node-modules from TARS-CLI, if tars was executed via CLI "
},
{
"path": "tars/tasks/css/compile-css-for-ie8.js",
"chars": 447,
"preview": "'use strict';\n\n/**\n * Styles compilation for IE8\n */\nmodule.exports = () => {\n return tars.packages.gulp.task('css:co"
},
{
"path": "tars/tasks/css/compile-css-for-ie9.js",
"chars": 447,
"preview": "'use strict';\n\n/**\n * Styles compilation for IE9\n */\nmodule.exports = () => {\n return tars.packages.gulp.task('css:co"
},
{
"path": "tars/tasks/css/compile-css.js",
"chars": 257,
"preview": "'use strict';\n\n/**\n * Styles compilation\n */\nmodule.exports = () => {\n return tars.packages.gulp.task('css:compile-cs"
},
{
"path": "tars/tasks/css/compress-css.js",
"chars": 907,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst rename = tars.packages.rename;\nconst plumber = tars.packages.plumb"
},
{
"path": "tars/tasks/css/helpers/actions-on-sprite-task-skipping.js",
"chars": 1288,
"preview": "const notifier = tars.helpers.notifier;\nconst fs = require('fs');\n\n/**\n * Create files with mixins, when you do not have"
},
{
"path": "tars/tasks/css/helpers/concat-compile-css-task-template.js",
"chars": 7929,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gulpif = tars.packages.gulpif;\nconst concat = tars.packages.concat"
},
{
"path": "tars/tasks/css/helpers/manual-compile-css-task-template.js",
"chars": 3790,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gulpif = tars.packages.gulpif;\nconst rename = tars.packages.rename"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/less-raster-sprite-mixins.less",
"chars": 886,
"preview": ".sprite-position(@sprite) {\n @sprite-offset-x: ~`\"@{sprite}\".split(', ')[2]`;\n @sprite-offset-y: ~`\"@{sprite}\".spl"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/less-svg-fallback-sprite-mixins.less",
"chars": 691,
"preview": ".svg-sprite-position(@svg-sprite) {\n @svg-sprite-offset-x: ~`\"@{svg-sprite}\".split(', ')[2]`;\n @svg-sprite-offset-"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/less-svg-sprite-mixins.less",
"chars": 519,
"preview": ".svg-sprite-position(@svg-sprite) {\n @svg-sprite-offset-x: ~`\"@{svg-sprite}\".split(', ')[0].replace('[', '')`;\n @s"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/scss-raster-sprite-mixins.scss",
"chars": 762,
"preview": "@mixin sprite-position($sprite) {\n $sprite-offset-x: nth($sprite, 3);\n $sprite-offset-y: nth($sprite, 4);\n back"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/scss-svg-fallback-sprite-mixins.scss",
"chars": 612,
"preview": "@mixin svg-sprite-position($svg-sprite) {\n $svg-sprite-offset-x: nth($svg-sprite, 3);\n $svg-sprite-offset-y: nth($"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/scss-svg-sprite-mixins.scss",
"chars": 466,
"preview": "@mixin svg-sprite-position($svg-sprite) {\n $svg-sprite-offset-x: nth($svg-sprite, 1);\n $svg-sprite-offset-y: nth($"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/stylus-raster-sprite-mixins.styl",
"chars": 314,
"preview": "bg-template($sprite, $repeat = no-repeat) {\n width: $sprite[4];\n height: $sprite[5];\n background-position: $spr"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/stylus-svg-fallback-sprite-mixins.styl",
"chars": 511,
"preview": "svg-sprite-position($svg-sprite) {\n $svg-sprite-offset-x = $svg-sprite[2];\n $svg-sprite-offset-y = $svg-sprite[3];"
},
{
"path": "tars/tasks/css/helpers/sprite-mixins/stylus-svg-sprite-mixins.styl",
"chars": 426,
"preview": "svg-sprite-position($svg-sprite) {\n $svg-sprite-offset-x = $svg-sprite[0];\n $svg-sprite-offset-y = $svg-sprite[1];"
},
{
"path": "tars/tasks/css/make-fallback-for-svg.js",
"chars": 3773,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst notifier = tars.helpers.not"
},
{
"path": "tars/tasks/css/make-sprite-for-svg.js",
"chars": 3046,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst notifier = tars.helpers.not"
},
{
"path": "tars/tasks/css/make-sprite.js",
"chars": 4167,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst notifier = tars.helpers.not"
},
{
"path": "tars/tasks/css/move-separate.js",
"chars": 895,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/html/compile-templates.js",
"chars": 7316,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst replace = tars.packages.replace;\nconst plumber = tars.packages.plu"
},
{
"path": "tars/tasks/html/concat-mocks-data.js",
"chars": 1488,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst concat = tars.packages.conc"
},
{
"path": "tars/tasks/html/helpers/generate-static-path.js",
"chars": 1715,
"preview": "'use strict';\n\nconst through2 = tars.packages.through2;\nconst path = require('path');\nconst Buffer = require('buffer').B"
},
{
"path": "tars/tasks/html/helpers/handlebars-helpers.js",
"chars": 8791,
"preview": "'use strict';\n\nconst Handlebars = tars.packages.handlebars;\n\nconst Dates = require('./utils/dates');\nconst Utils = requi"
},
{
"path": "tars/tasks/html/helpers/jade-helpers.js",
"chars": 1921,
"preview": "'use strict';\n\nconst builtInPugHelpers = {\n\n /**\n * Icon helper for Jade\n * It returns template for svg-symbo"
},
{
"path": "tars/tasks/html/helpers/pages-and-data-files-processing.js",
"chars": 3291,
"preview": "'use strict';\n\nconst through2 = tars.packages.through2;\nconst File = tars.packages.gutil.File;\nconst path = require('pat"
},
{
"path": "tars/tasks/html/helpers/pug-helpers.js",
"chars": 2061,
"preview": "'use strict';\n\nconst builtInPugHelpers = {\n\n /**\n * Icon helper for Jade\n * It returns template for svg-symbo"
},
{
"path": "tars/tasks/html/helpers/utils/dates.js",
"chars": 5661,
"preview": "/**\n * Handlebars Helpers Utils\n * http://github.com/assemble/handlebars-helpers\n * Copyright (c) 2013 Jon Schlinkert, B"
},
{
"path": "tars/tasks/html/helpers/utils/utils.js",
"chars": 519,
"preview": "/**\n * Handlebars Helpers: Utils\n * http://github.com/assemble/handlebars-helpers\n * Copyright (c) 2013, 2014 Jon Schlin"
},
{
"path": "tars/tasks/html/modify-html.js",
"chars": 1386,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gulpif = tars.packages.gulpif;\nconst plumber = tars.packages.plumb"
},
{
"path": "tars/tasks/images/helpers/symbols-data-template.js",
"chars": 194,
"preview": "__iconsData: {\n <% _.forEach(icons, icon => { %>\n '<%= icon.name %>': {\n width: '<%= icon.width %>p"
},
{
"path": "tars/tasks/images/make-symbols-sprite.js",
"chars": 2643,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gulpif = tars.packages.gulpif;\nconst rename = tars.packages.rename"
},
{
"path": "tars/tasks/images/minify-images.js",
"chars": 1822,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst changed = tars.packages.changed;\nconst plumber = tars.packages.plu"
},
{
"path": "tars/tasks/images/minify-svg.js",
"chars": 1806,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst changed = tars.packages.changed;\nconst plumber = tars.packages.plu"
},
{
"path": "tars/tasks/images/move-content-img.js",
"chars": 1206,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/images/move-general-img.js",
"chars": 1202,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/images/move-plugins-img.js",
"chars": 1208,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/images/raster-svg.js",
"chars": 1537,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst changed = tars.packages.changed"
},
{
"path": "tars/tasks/js/check.js",
"chars": 1974,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/js/concat-processing.js",
"chars": 3711,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst concat = tars.packages.concat;\nconst streamCombiner = tars.package"
},
{
"path": "tars/tasks/js/helpers/separate-files-filter.js",
"chars": 1190,
"preview": "'use strict';\n\nconst through2 = tars.packages.through2;\nconst path = require('path');\n\n/**\n * Filter files for move-sepa"
},
{
"path": "tars/tasks/js/move-separate.js",
"chars": 997,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/js/processing.js",
"chars": 915,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\nmodule.exports"
},
{
"path": "tars/tasks/js/webpack-processing.js",
"chars": 1430,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gutil = tars.packages.gutil;\nconst notifier = tars.helpers.notifie"
},
{
"path": "tars/tasks/main/build-dev.js",
"chars": 1178,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Build d"
},
{
"path": "tars/tasks/main/build.js",
"chars": 1338,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gutil = tars.packages.gutil;\nconst runSequence = tars.packages.run"
},
{
"path": "tars/tasks/main/create-build.js",
"chars": 787,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst notifier = tars.helpers.not"
},
{
"path": "tars/tasks/main/dev.js",
"chars": 3648,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst notify = tars.packages.notify;\nconst browserSync = tars.packages.b"
},
{
"path": "tars/tasks/other/move-assets.js",
"chars": 1597,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gulpif = tars.packages.gulpif;\nconst cache = tars.packages.cache;\n"
},
{
"path": "tars/tasks/other/move-fonts.js",
"chars": 914,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst cache = tars.packages.cache;\nconst plumber = tars.packages.plumber"
},
{
"path": "tars/tasks/other/move-misc-files.js",
"chars": 784,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst notifier = tars.helpers.not"
},
{
"path": "tars/tasks/services/clean.js",
"chars": 907,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst del = tars.packages.del;\nconst preProcName = tars.cssPreproc.name;"
},
{
"path": "tars/tasks/services/create-fs.js",
"chars": 1704,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst del = tars.packages.del;\nconst fs = require('fs');\n\nconst staticFo"
},
{
"path": "tars/tasks/services/init.js",
"chars": 8069,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gutil = tars.packages.gutil;\nconst del = tars.packages.del;\n\n/**\n "
},
{
"path": "tars/tasks/services/remove-init-fs.js",
"chars": 1335,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst del = tars.packages.del;\nconst staticFolderName = tars.config.fs.s"
},
{
"path": "tars/tasks/services/update-deps.js",
"chars": 2172,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst gutil = tars.packages.gutil;\nconst fs = require('fs');\n\n/**\n * Upd"
},
{
"path": "tars/tasks/services/zip-build.js",
"chars": 1167,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumber;\nconst notifier = tars.helpers.not"
},
{
"path": "tars/user-tasks/example-task.js",
"chars": 1527,
"preview": "'use strict';\n\n// This is example of task function\n\nconst gulp = tars.packages.gulp;\nconst plumber = tars.packages.plumb"
},
{
"path": "tars/user-tasks/html/helpers/handlebars-helpers.js",
"chars": 534,
"preview": "'use strict';\n\nconst Handlebars = tars.packages.handlebars;\n\n/**\n * You can add your own helpers to handlebarsHelpers Ob"
},
{
"path": "tars/user-tasks/html/helpers/jade-helpers.js",
"chars": 470,
"preview": "'use strict';\n\n/**\n * You can add your own helpers to jadeHelpers Object\n * All helpers from that object will be availab"
},
{
"path": "tars/user-tasks/html/helpers/modify-options.js",
"chars": 2148,
"preview": "// All options from here will override default params,\n// which are set in modify-html task and in minify and prettify p"
},
{
"path": "tars/user-tasks/html/helpers/pug-helpers.js",
"chars": 467,
"preview": "'use strict';\n\n/**\n * You can add your own helpers to pugHelpers Object\n * All helpers from that object will be availabl"
},
{
"path": "tars/user-watchers/example-watcher.js",
"chars": 1057,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst gutil = t"
},
{
"path": "tars/watchers/css/common-css.js",
"chars": 1070,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst watcherLo"
},
{
"path": "tars/watchers/css/ie8-css.js",
"chars": 774,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst watcherLo"
},
{
"path": "tars/watchers/css/ie9-css.js",
"chars": 774,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst watcherLo"
},
{
"path": "tars/watchers/css/modules-css.js",
"chars": 1227,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst watcherLo"
},
{
"path": "tars/watchers/js/all.js",
"chars": 1454,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst watcherLo"
},
{
"path": "tars/watchers/move/assets.js",
"chars": 650,
"preview": "'use strict';\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher "
},
{
"path": "tars/watchers/move/content-img.js",
"chars": 701,
"preview": "'use strict';\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst imagesFold"
},
{
"path": "tars/watchers/move/fonts.js",
"chars": 453,
"preview": "'use strict';\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher "
},
{
"path": "tars/watchers/move/general-img.js",
"chars": 682,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst imagesFol"
},
{
"path": "tars/watchers/move/misc-files.js",
"chars": 609,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher"
},
{
"path": "tars/watchers/move/plugins-img.js",
"chars": 685,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst imagesFol"
},
{
"path": "tars/watchers/move/separate-css.js",
"chars": 536,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher"
},
{
"path": "tars/watchers/move/separate-js.js",
"chars": 477,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher"
},
{
"path": "tars/watchers/sprite/png-sprites.js",
"chars": 548,
"preview": "'use strict';\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher "
},
{
"path": "tars/watchers/sprite/svg-sprites.js",
"chars": 1048,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher"
},
{
"path": "tars/watchers/sprite/symbols.js",
"chars": 814,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\n\n/**\n * Watcher"
},
{
"path": "tars/watchers/templates/data-files.js",
"chars": 1211,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst templater"
},
{
"path": "tars/watchers/templates/page-modules.js",
"chars": 1065,
"preview": "'use strict';\n\nconst gulp = tars.packages.gulp;\nconst runSequence = tars.packages.runSequence.use(gulp);\nconst path = re"
},
{
"path": "tars-config.js",
"chars": 7789,
"preview": "'use strict';\n\nmodule.exports = {\n\n /////////////////////\n // MUTABLE OPTIONS ////////////////////////////////\n "
},
{
"path": "tars.json",
"chars": 95,
"preview": "{\n \"name\": \"tars\",\n \"version\": \"1.15.1\",\n \"description\": \"Powerfull markup builder\"\n}\n"
},
{
"path": "templates/handlebars/markup/components/_template/_template.html",
"chars": 0,
"preview": ""
},
{
"path": "templates/handlebars/markup/components/default_component_scheme.json",
"chars": 627,
"preview": "{\n \"folders\": [\n {\n \"name\": \"data\",\n \"files\": [\n {\n \"n"
},
{
"path": "templates/handlebars/markup/components/example/example.html",
"chars": 28,
"preview": "<h1>\n Hello, World!\n</h1>"
},
{
"path": "templates/handlebars/markup/components/footer/footer.html",
"chars": 26,
"preview": "<div class=\"footer\"></div>"
},
{
"path": "templates/handlebars/markup/components/head/data/data.js",
"chars": 95,
"preview": "head: {\n defaults: {\n title: 'default title',\n useSocialMetaTags: true\n }\n}"
},
{
"path": "templates/handlebars/markup/components/head/head.html",
"chars": 1629,
"preview": "<meta charset=\"utf-8\">\n<meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\n<title>{{title}}</title>\n<meta content=\"\" n"
},
{
"path": "templates/handlebars/markup/pages/_template.html",
"chars": 700,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"ru\">\n\n <head>\n {{> head/head head.defaults}}\n </head>\n\n <body "
},
{
"path": "templates/handlebars/markup/pages/index.html",
"chars": 735,
"preview": "<!doctype html>\n<html class=\"no-js\" lang=\"ru\">\n\n <head>\n {{> head/head head.defaults}}\n </head>\n\n <body "
},
{
"path": "templates/jade/markup/components/_template/_template.jade",
"chars": 21,
"preview": "mixin _template(data)"
},
{
"path": "templates/jade/markup/components/default_component_scheme.json",
"chars": 641,
"preview": "{\n \"folders\": [\n {\n \"name\": \"data\",\n \"files\": [\n {\n \"n"
},
{
"path": "templates/jade/markup/components/example/example.jade",
"chars": 50,
"preview": "mixin example(data)\n h1\n | Hello, World!"
},
{
"path": "templates/jade/markup/components/footer/footer.jade",
"chars": 36,
"preview": "mixin footer(data)\n footer.footer"
},
{
"path": "templates/jade/markup/components/head/data/data.js",
"chars": 95,
"preview": "head: {\n defaults: {\n title: 'default title',\n useSocialMetaTags: true\n }\n}"
},
{
"path": "templates/jade/markup/components/head/head.jade",
"chars": 1766,
"preview": "mixin head(data)\n meta(charset=\"utf-8\")\n meta(http-equiv=\"x-ua-compatible\", content=\"ie=edge\")\n title #{data.ti"
},
{
"path": "templates/jade/markup/pages/_template.jade",
"chars": 587,
"preview": "doctype html\nhtml(class=\"no-js\", lang=\"ru\")\n\n include ../components/head/head\n include ../components/footer/footer"
},
{
"path": "templates/jade/markup/pages/index.jade",
"chars": 651,
"preview": "doctype html\nhtml(class=\"no-js\", lang=\"ru\")\n\n include ../components/head/head\n include ../components/example/examp"
},
{
"path": "templates/less/markup/components/_template/_template.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/GUI.less",
"chars": 85,
"preview": "// GUI stylies of the project\n// For example, styles of the links, buttons and so on."
},
{
"path": "templates/less/markup/static/less/common.less",
"chars": 248,
"preview": "// Common styles of the project\n\nhtml, body {\n height: 100%;\n}\n\n.page {\n // Стили для body\n}\n\n.page__wrapper {\n "
},
{
"path": "templates/less/markup/static/less/entry/built-in-partials/_service-ie8.less",
"chars": 759,
"preview": "/* Some styles, which is used for correct sprite-generation, vars, mixins and etc */\n/* Please, do not edit with file! *"
},
{
"path": "templates/less/markup/static/less/entry/built-in-partials/_service.less",
"chars": 701,
"preview": "/* Some styles, which is used for correct sprite-generation, vars, mixins and etc */\n/* Please, do not edit with file! *"
},
{
"path": "templates/less/markup/static/less/entry/ie/main_ie8.less",
"chars": 510,
"preview": "@import '../../normalize.less';\n\n/* Libraries, which is used in current project. */\n@import '../partials/_libraries.less"
},
{
"path": "templates/less/markup/static/less/entry/ie/main_ie9.less",
"chars": 506,
"preview": "@import '../../normalize.less';\n\n/* Libraries, which is used in current project. */\n@import '../partials/_libraries.less"
},
{
"path": "templates/less/markup/static/less/entry/main.less",
"chars": 444,
"preview": "@import '../normalize.less';\n\n/* Libraries, which is used in current project. */\n@import 'partials/_libraries.less';\n\n/*"
},
{
"path": "templates/less/markup/static/less/entry/partials/_components-ie8.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/entry/partials/_components-ie9.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/entry/partials/_components.less",
"chars": 49,
"preview": "// @import 'components/_template/_template.less';"
},
{
"path": "templates/less/markup/static/less/entry/partials/_libraries.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/entry/partials/_plugins.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/etc/etc.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/fonts.less",
"chars": 563,
"preview": "/* Your custom fonts here */\n\n/* Example\n\n@font-face {\n font-family: 'CustomFont';\n src: url('../fonts/Custom-Font"
},
{
"path": "templates/less/markup/static/less/libraries/library-sample.less",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/mixins.less",
"chars": 415,
"preview": "// Mixins.\n\n.nl() {\n margin: 0;\n padding: 0;\n text-indent: 0;\n list-style: none;\n list-style-position: ou"
},
{
"path": "templates/less/markup/static/less/normalize.less",
"chars": 6252,
"preview": "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ==========================="
},
{
"path": "templates/less/markup/static/less/plugins/sample-plugin.less",
"chars": 101,
"preview": "// This is a sample file for scss for plugins\n// Each plugin's scss code have to be in separate files"
},
{
"path": "templates/less/markup/static/less/separate-css/separate-css-sample.css",
"chars": 0,
"preview": ""
},
{
"path": "templates/less/markup/static/less/sprite-generator-templates/less.sprite.mustache",
"chars": 2530,
"preview": "{\n // Default options\n 'functions': true\n}\n\n{{#items}}\n @{{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} "
},
{
"path": "templates/less/markup/static/less/sprite-generator-templates/less.svg-fallback-sprite.mustache",
"chars": 983,
"preview": "{\n // Default options\n 'functions': true\n}\n\n{{#items}}\n @{{name}}: {{px.x}} {{px.y}} {{px.offset_x}} {{px.offset_y}} "
},
{
"path": "templates/less/markup/static/less/sprite-generator-templates/less.svg-sprite.mustache",
"chars": 693,
"preview": "{{#sprites}}\n @{{fileName}}: {{x}}{{units}} {{y}}{{units}} {{w}}{{units}} {{h}}{{units}} {{width}}{{units}} {{height}}{"
},
{
"path": "templates/less/markup/static/less/sprites-less/sprite-png-ie.less",
"chars": 83,
"preview": ".bg(@sprite, @repeat: no-repeat) {\n .bg-template(@sprite, @repeat: no-repeat);\n}"
},
{
"path": "templates/less/markup/static/less/sprites-less/sprite-png.less",
"chars": 111,
"preview": ".bg(@sprite, @repeat: no-repeat) {\n .bg-template(@sprite, @repeat: no-repeat);\n .highDpiMedia(@sprite);\n}"
}
]
// ... and 62 more files (download for full content)
About this extraction
This page contains the full source code of the 2gis/tars GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 262 files (446.3 KB), approximately 119.3k tokens, and a symbol index with 69 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.