\u042f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0431\u043e\u0440\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u0430. \u0417\u0430\u0434\u0430\u0447\u0430 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0438 \u0441\u0442\u043e\u0438\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e \u043d\u0435\u0439 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n
\u0427\u0442\u043e \u0443\u043c\u0435\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a:
\n \u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c front-end \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f development & production \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0439. \u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e js\/css \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c CommonJS \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ES6-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u0421\u043f\u0440\u0430\u0439\u0442\u044b, \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 <\/p>\n
\u0412\u0441\u0442\u0443\u043f\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435
\n \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0439 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043c\u044b\u0441\u043b\u044c\u044e, \u0441\u0440\u0430\u0437\u0443 \u043a\u0438\u0434\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430: github.com\/alexfedoseev\/js-app-starter<\/p>\n
\u041a\u0430\u043a \u0435\u0433\u043e \u0437\u0430\u0432\u0435\u0441\u0442\u0438\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d npm.
\n npm -v <\/p>\n
\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 (\u0435\u0441\u043b\u0438 \u0435\u0449\u0451 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b):
\n npm install -g gulp browserify babel jade stylus http-server <\/p>\n
\u0421\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0444\u043e\u0440\u043a \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.
\n git clone https:\/\/github.com\/alexfedoseev\/js-app-starter.git <\/p>\n
\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f):
\n npm install <\/p>\n
\u0421\u043e\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 development \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440:
\n npm start <\/p>\n
\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 lvh.me:3500<\/p>\n
\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Gulp.
\n \u0427\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f:
\n \u0421\u0431\u043e\u0440\u043a\u0430 HTML
\n \u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440: Jade \u0421\u0431\u043e\u0440\u043a\u0430 CSS
\n \u041f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440: Stylus
\n \u041f\u0440\u0435\u0444\u0438\u043a\u0441\u0435\u0440: Autoprefixer \u0421\u0431\u043e\u0440\u043a\u0430 JS
\n \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430: Browserify + Babel (ES6 transpiler)
\n \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430: jsHint \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439
\n \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440: Imagemin \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438: \u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 json, \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 public \u043f\u0430\u043f\u043a\u0443
\n \u0421\u0431\u043e\u0440\u0449\u0438\u043a \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432: Spritesmith
\n \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 json: gulp-json-editor
\n \u0412\u043e\u0431\u0449\u0435 \u044f \u043b\u044e\u0431\u043b\u044e Slim \u0438 Sass, \u043d\u043e Ruby \u043a Ruby, a JS \u043a JS: \u0434\u043b\u044f frontend-\u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0442\u0443\u043a\u0438 \u0438\u0437 npm. \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c.<\/p>\n
\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\n | dist\/ | lib\/ |— gulp\/ |— helpers\/ |— tasks\/ |— config.js | node_modules\/ | public\/ |— css\/ |— files\/ |— fonts\/ |— img\/ |— js\/ |— json\/ |— favicon.ico |— index.html | src\/ |— css\/ |— files\/ |— fonts\/ |— html\/ |— img\/ |— js\/ |— json\/ |— sprite\/ |— favicon.ico | .gitignore | .npmignore | gulpfile.js | npm-shrinkwrap.json | package.json Github<\/p>\n
.gitignore & .npmignore
\n \u0412\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f git \u0438 npm \u043f\u0440\u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u0430\u0445\/\u043f\u0430\u0431\u043b\u0438\u0448\u0430\u0445.<\/p>\n
node_modules\/
\n \u0412 \u044d\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0430\u0434\u0430\u044e\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0447\u0435\u0440\u0435\u0437 npm.<\/p>\n
npm-shrinkwrap.json
\n \u042f \u043d\u0435 \u0434\u0435\u0440\u0436\u0443 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 node_modules\/. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043b\u043e\u0447\u0443 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b. \u041e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439: `npm shrinkwrap`.<\/p>\n
package.json
\n \u042d\u0442\u043e \u0444\u0430\u0439\u043b \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041a \u043d\u0435\u043c\u0443 \u0435\u0449\u0451 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f.<\/p>\n
gulpfile.js
\n \u041e\u0431\u044b\u0447\u043d\u043e \u0442\u0443\u0442 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0430\u0441\u043a\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 gulp-\u0442\u0430\u0441\u043a\u0430\u043c\u0438.<\/p>\n
lib\/gulp\/
\n \u0417\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u043c \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n
|— config.js
\n \u0412\u044b\u043d\u043e\u0441\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u0441\u043a\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0447\u0442\u043e\u0431\u044b \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u043a\u0443 \u0441\u0430\u043c\u0438\u0445 \u0442\u0430\u0441\u043a\u043e\u0432.<\/p>\n
|— helpers\/
\n \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n
|— tasks\/
\n \u0418 \u0441\u0430\u043c\u0438 gulp-\u0442\u0430\u0441\u043a\u0438.<\/p>\n
src\/
\n \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
public\/
\n \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0431\u043e\u0440\u043a\u0438. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c \u0438 \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043e\u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0443\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u043c.<\/p>\n
dist\/
\n \u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u043f\u0438\u0448\u0443 opensource-\u043c\u043e\u0434\u0443\u043b\u0438. \u0412 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f public\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438\u0437\u0435\u043c\u043b\u0435\u043d\u0438\u044f, \u0442\u043e \u043e\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f.<\/p>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\n package.json
\n \u042d\u0442\u043e \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.
\n \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0443\u0442: browsenpm.org\/package.json
\n \u041d\u0438\u0436\u0435 \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445.<\/p>\n
{ \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 "name": "js-app-starter", \/\/ \u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f js+css \u0432 \u043a\u044d\u0448\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 "version": "0.0.1", \/\/ \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442\u043e \u0442\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 `require(‘your-lib’)` "main": ".\/dist\/app.js", \/\/ \u041d\u0430\u0441\u0442\u043e\u0439\u043a\u0438 browserify \/\/ \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c ES6 \u0432 ES5 "browserify": { "transform": [ "babelify" ] }, \/\/ \u041a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0438\u0436\u0435) "scripts": { "start": "NODE_ENV=development http-server -a lvh.me -p 3500 & gulp", "build": "NODE_ENV=production gulp build" }, \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 jshint (\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430) "lintOptions": { "esnext": true … }, \/\/ Frontend \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 "dependencies": { "jquery": "^2.1.3" … }, \/\/ Development \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 "devDependencies": { "gulp": "^3.8.11" … } } Github<\/p>\n
\u041a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b
\n \u0412 package.json \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0447\u0430\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n
"scripts": { "start": "NODE_ENV=development http-server -a lvh.me -p 3500 & gulp", "build": "NODE_ENV=production gulp build" } <\/p>\n
Development \u0441\u0431\u043e\u0440\u043a\u0430
\n \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e:
\n \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 (\u0441 sourcemaps \u0434\u043b\u044f \u0434\u0435\u0431\u0430\u0433\u0430) \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u00ab\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440
\n # \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c npm start # \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 NODE_ENV=development http-server -a lvh.me -p 3500 & gulp
\n \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c# \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV=development # \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u0434\u043e\u043c\u0435\u043d\u0435 lvh.me \u0438 \u043f\u043e\u0440\u0442\u0435 3500 http-server -a lvh.me -p 3500 # \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c gulp \u0442\u0430\u0441\u043a\u0438 gulp <\/p>\n
Production \u0441\u0431\u043e\u0440\u043a\u0430
\n \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0440\u0435\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0434\u0435\u043b\u0430\u0435\u043c production-\u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n
# \u043d\u0430\u0436\u043c\u0438\u0442\u0435 Ctrl+C, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b # \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c npm run build # \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 NODE_ENV=production gulp build
\n \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c# \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV=production # \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c gulp-\u0442\u0430\u0441\u043a `build` gulp build <\/p>\n
Gulp
\n \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a Gulp. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0441\u043a\u043e\u0432 \u0432\u0437\u044f\u0442\u0430 \u0438\u0437 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043e\u0442 Dan Tello.<\/p>\n
\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043d\u044b\u0440\u043d\u0443\u0442\u044c, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e gulp-\u0442\u0430\u0441\u043a\u0430:<\/p>\n
var gulp = require(‘gulp’); gulp.task(‘task_1’, [‘pre_task_1’, ‘pre_task_2’], function() { console.log(‘task_1 is done’); }); \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438 `task_1`, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 `task_1 is done` \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u043d \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 `gulp task_1` \/\/ \u041d\u043e \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e `task_1` \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c\u0441\u044f \u0437\u0430\u0434\u0430\u0447\u0438 `[‘pre_task_1’, ‘pre_task_2’]` \/\/ \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e ‘pre_task_1’ & ‘pre_task_2’ — \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \/\/ \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \/\/ \u0430 `task_1` \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 2 pre-\u0437\u0430\u0434\u0430\u0447\u0438 — \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0447\u0442\u043e \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c.<\/p>\n
Development \u0441\u0431\u043e\u0440\u043a\u0430
\n `npm start` \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 `gulp`. \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n
Gulp \u0438\u0449\u0435\u0442 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 gulpfile.js. \u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u043d\u0435\u0433\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0430\u0441\u043a\u0438, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u0442 \u043d\u0430\u0441 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 gulp-\u0442\u0430\u0441\u043a\u0430\u043c\u0438.<\/p>\n
\u041a\u043e\u0434 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438\/* file: gulpfile.js *\/ \/\/ \u043c\u043e\u0434\u0443\u043b\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0430\u0441\u043a\u0438 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 var requireDir = require(‘require-dir’); \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \/\/ \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c \u0432 \u0442\u0430\u0441\u043a\u0430\u0445 development & production \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f global.devBuild = process.env.NODE_ENV !== ‘production’; \/\/ \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u0442\u0430\u0441\u043a\u0430\u043c\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u043c requireDir(‘.\/lib\/gulp\/tasks’, { recurse: true }); Github<\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043d\u0430\u0441 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u043b\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0438\u0449\u0435\u0442 \u0442\u0430\u0441\u043a \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c `default`, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u00ab\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439\u00bb \u043d\u0430\u0434 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c:
\n \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043f\u0430\u043f\u043a\u0438 `public\/` & `dist\/` \u043b\u0438\u043d\u0442\u0438\u0442 js-\u0444\u0430\u0439\u043b\u044b \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043f\u0440\u0430\u0439\u0442\u044b
\n \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 (html, css, js \u0438 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435).<\/p>\n
\u041a\u043e\u0434 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438default<\/p>\n
\/* file: lib\/gulp\/tasks\/default.js *\/ var gulp = require(‘gulp’); \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0442\u0430\u0441\u043a `default`, \u043d\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0430\u0441\u043a `watch` gulp.task(‘default’, [‘watch’]); Github<\/p>\n
watch<\/p>\n
\/* file: lib\/gulp\/tasks\/watch.js *\/ var gulp = require(‘gulp’), finder = require(‘..\/helpers\/finder’), \/\/ \u0445\u0435\u043b\u043f\u0435\u0440 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 config = require(‘..\/config’); \/\/ \u043a\u043e\u043d\u0444\u0438\u0433 \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0442\u0430\u0441\u043a `watch`, \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0430\u0441\u043a\u0438 `watching` & `build` gulp.task(‘watch’, [‘watching’, ‘build’], function() { \/\/ \u0412\u0435\u0448\u0430\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f\u0445 `css`, `images` & `html` \/\/ \u041f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 gulp \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0430\u0441\u043a gulp.watch(finder(config.css.src), [‘css’]); gulp.watch(finder(config.images.src), [‘images’]); gulp.watch(finder(config.html.src), [‘html’]); }); gulp.task(‘watching’, function() { \/\/ \u041e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e `isWatching`, \/\/ \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b global.isWatching = true; }); Github<\/p>\n
build<\/p>\n
\/* file: lib\/gulp\/tasks\/build.js *\/ var gulp = require(‘gulp’); \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0442\u0430\u0441\u043a `build`, \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0430\u0441\u043a\u0438: \/\/ `clean` — \u043f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 `public\/` & `dist\/` \/\/ `lint` — \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f jshint \u043f\u043e js-\u0444\u0430\u0439\u043b\u0430\u043c (\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430) \/\/ `sprite` — \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u043f\u0440\u0430\u0439\u0442\u044b gulp.task(‘build’, [‘clean’, ‘lint’, ‘sprite’], function() { \/\/ \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0442\u0440\u0438 \u0442\u0430\u0441\u043a\u0430 \u0432\u044b\u0448\u0435, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u0441\u043a `bundle` \/\/ \u0412\u043e\u0431\u0449\u0435 \u043c\u0435\u0442\u043e\u0434 `gulp.start` deprecated, \/\/ \u043d\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 sync\/async \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 Gulp 4.0, \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u043a\u0430 \u0435\u0433\u043e gulp.start(‘bundle’); }); \/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 gulp.task(‘bundle’, [‘scripts’, ‘css’, ‘images’, ‘html’, ‘copy’], function() { \/\/ \u0415\u0441\u043b\u0438 \u043c\u044b \u0432 dev-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438, \u0442\u043e \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 `doBeep` = true \/\/ `notifier` \u0445\u0435\u043b\u043f\u0435\u0440 \u043f\u043e\u043a\u0430\u0436\u0435\u0442 \u043d\u0430\u043c \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0438\u043b\u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u0441\u043a\u043e\u0432 \/\/ (\u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u043c) if (devBuild) global.doBeep = true; }); Github
\n Production \u0441\u0431\u043e\u0440\u043a\u0430
\n \u0421 \u043d\u0435\u0439 \u0432\u0441\u0451 \u043f\u0440\u043e\u0449\u0435. `npm run build` \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 `gulp build`, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u0446\u0435\u043b\u0435\u0432\u044b\u0435 \u043f\u0430\u043f\u043a\u0438, \u043b\u0438\u043d\u0442\u0438\u0442 js-\u043a\u043e\u0434, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0438 \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0431\u0438\u0440\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442 (\u0431\u0435\u0437 sourcemaps). \u041a\u043e\u0434 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438 \u0432\u044b\u0448\u0435.<\/p>\n
\u0424\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 gulp-\u0442\u0430\u0441\u043a\u043e\u0432
\n \u0412\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0442\u0430\u0441\u043a\u043e\u0432 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b lib\/gulp\/config.js:<\/p>\n
\/* file: lib\/gulp\/config.js *\/ var pkg = require(‘..\/..\/package.json’), \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c package.json bundler = require(‘.\/helpers\/bundler’); \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0445\u0435\u043b\u043f\u0435\u0440 \u0434\u043b\u044f \u0441\u043e\u0437\u043b\u0430\u043d\u0438\u044f \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \/* \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u0438 *\/ var _src = ‘.\/src\/’, \/\/ \u043f\u0443\u0442\u044c \u0434\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 _dist = ‘.\/dist\/’, \/\/ \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0434\u0438\u0441\u0442\u0440\u0438\u0431\u0443\u0442\u0438\u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 _public = ‘.\/public\/’; \/\/ \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 var _js = ‘js\/’, \/\/ \u043f\u0430\u043f\u043a\u0430 \u0441 javascript \u0444\u0430\u0439\u043b\u0430\u043c\u0438 _css = ‘css\/’, \/\/ \u043f\u0430\u043f\u043a\u0430 \u0441 css _img = ‘img\/’, \/\/ \u043f\u0430\u043f\u043a\u0430 \u0441 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 _html = ‘html\/’; \/\/ \u043f\u0430\u043f\u043a\u0430 \u0441 html \/* * \u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c js \/ css \u0431\u0430\u043d\u0434\u043b\u044b * * \u041f\u0440\u0438\u043c\u0435\u0440: app.js, app.css — \u0441\u0430\u0439\u0442 * admin.js, admin.css — \u0430\u0434\u043c\u0438\u043d\u043a\u0430 * * \u041f\u0440\u0438\u043c\u0435\u0440: your-lib.js — \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 * your-lib.jquery.js — \u043c\u043e\u0434\u0443\u043b\u044c \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 jquery-\u043f\u043b\u0430\u0433\u0438\u043d\u0430 * *\/ var bundles = [ { name : ‘app’, \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0431\u0430\u043d\u0434\u043b\u0430 global : ‘app’, \/\/ \u0435\u0441\u043b\u0438 \u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c, \u044d\u0442\u043e \u0438\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0451\u043d compress : true, \/\/ \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c? saveToDist : true \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 `\/dist`? (true — \u0435\u0441\u043b\u0438 \u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c, false — \u0435\u0441\u043b\u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u0430\u0439\u0442) } ]; module.exports = { \/* \u0442\u0443\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0430\u0441\u043a\u043e\u0432 *\/ }; Github<\/p>\n
\u0421\u0431\u043e\u0440\u043a\u0430 HTML
\n \u0414\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Jade. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u043f\u0430\u0440\u0442\u0438\u0430\u043b\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c inline-javascript, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043c\u0438\u043a\u0441\u0438\u043d\u044b \u0438 \u0435\u0449\u0451 \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0440\u0443\u0442\u044b\u0445 \u0448\u0442\u0443\u043a.<\/p>\n
Gulp\u041a\u043e\u043d\u0444\u0438\u0433<\/p>\n
\/* file: lib\/gulp\/config.js *\/ html: { src: _src + _html, \/\/ \u043f\u0443\u0442\u044c \u0434\u043e jade-\u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 dest: _public, \/\/ \u043a\u0443\u0434\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0435 params: { \/\/ \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f jade pretty: devBuild, \/\/ \u0443\u0431\u0438\u0432\u0430\u0435\u043c \u043e\u0442\u0441\u0442\u0443\u043f\u044b \u0432 html? locals: { \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u044b pkgVersion: pkg.version \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e \u0440\u0435\u043b\u0438\u0437\u0430 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e `pkgVersion` } } } Github<\/p>\n
\u0422\u0430\u0441\u043a<\/p>\n
\/* file: lib\/gulp\/tasks\/html.js *\/ var gulp = require(‘gulp’), jade = require(‘gulp-jade’), jadeInherit = require(‘gulp-jade-inheritance’), gulpif = require(‘gulp-if’), changed = require(‘gulp-changed’), filter = require(‘gulp-filter’), notifier = require(‘..\/helpers\/notifier’), config = require(‘..\/config’).html; gulp.task(‘html’, function(cb) { \/\/ \u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 jade-\u0444\u0430\u0439\u043b\u044b \u0438\u0437 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 src\/html gulp.src(config.src + ‘*.jade’) \/\/ \u0435\u0441\u043b\u0438 dev-\u0441\u0431\u043e\u0440\u043a\u0430, \u0442\u043e watcher \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437\u043c\u0435\u043d\u0451\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b .pipe(gulpif(devBuild, changed(config.dest))) \/\/ \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 .pipe(jadeInherit({basedir: config.src})) \/\/ \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u044b\u0432\u0430\u0435\u043c \u043d\u0435-\u043f\u0430\u0440\u0442\u0438\u0430\u043b\u044b (\u0431\u0435\u0437 `_` \u0432\u043d\u0430\u0447\u0430\u043b\u0435) .pipe(filter(function(file) { return !\/\\\/_\/.test(file.path) || !\/^_\/.test(file.relative); })) \/\/ \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c jade \u0432 html .pipe(jade(config.params)) \/\/ \u043f\u0438\u0448\u0435\u043c html-\u0444\u0430\u0439\u043b\u044b .pipe(gulp.dest(config.dest)) \/\/ \u043f\u043e \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e .on(‘end’, function() { notifier(‘html’); \/\/ \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u0435 (\u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 + \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u0448\u043a\u0430) cb(); \/\/ gulp-callback, \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043e \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0438 \u0442\u0430\u0441\u043a\u0430 }); }); Github
\n \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043a\u0438 src\/html<\/p>\n
| src |— html |— index.jade # \u0441\u043a\u0435\u043b\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b |— components\/ # \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b |— _header.jade |— helpers\/ # \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043c\u0438\u043a\u0441\u0438\u043d\u044b |— _params.jade |— _mixins.jade |— meta\/ # \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 head, \u043a\u043e\u0434\u044b \u0430\u043d\u0430\u043b\u0438\u0442\u0438\u043a\u0438 \u0438 \u043f\u0440. |— _head.jade Github<\/p>\n
\u0412\u0441\u0435 \u043f\u0430\u0440\u0442\u0438\u0430\u043b\u044b \u0441\u043d\u0430\u0431\u0436\u0430\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c `_` (\u043d\u0438\u0436\u043d\u0435\u0435 \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u0438\u0432\u0430\u043d\u0438\u0435), \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0438\u0445 \u043e\u0442\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n
helpers\/_variables.jade
\n \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u0441\u0442\u043e\u0438\u0442 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0441\u0442\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u043e \u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0451.<\/p>\n
\/* file: src\/html\/helpers\/_variables.jade *\/ — var release = pkgVersion \/\/ \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0438\u0437 gulp-\u043a\u043e\u043d\u0444\u0438\u0433\u0430 — var phone = ‘8 800 CALL-ME-NOW’ \/\/ \u0442\u0435\u043b\u0435\u0444\u043e\u043d Github<\/p>\n
helpers\/_mixins.jade
\n \u0427\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0431\u043b\u043e\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0432 mixin.<\/p>\n
\/* file: src\/html\/helpers\/_mixins.jade *\/ mixin phoneLink(phoneString) — var cleanPhone = phoneString.replace(\/\\(|\\)|\\s|\\-\/g, ») a(href="tel:#{cleanPhone}")= phoneString \/\/ \u0432 \u0432\u0435\u0440\u0441\u0442\u043a\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \/\/ +phoneLink(phone) Github<\/p>\n
index.jade
\n \u0421\u043a\u0435\u043b\u0435\u0442 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n
\/* file: src\/html\/index.jade *\/ include helpers\/_variables \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 include helpers\/_mixins \/\/ \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u0438\u043a\u0441\u0438\u043d\u044b doctype html html head include meta\/_head body include components\/_header include components\/_some_component include components\/_footer Github<\/p>\n
meta\/_head.jade
\n \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 head.<\/p>\n
\/* file: src\/html\/meta\/_head.jade *\/ meta(charset="utf-8") … \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0431\u043e\u0440\u043a\u0438, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c js\/css \u0432 \u043a\u044d\u0448\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 link(rel="stylesheet" href="css\/app.min.css?v=#{release}") script(src="js\/app.min.js?v=#{release}") … Github<\/p>\n
\u0421\u0431\u043e\u0440\u043a\u0430 JavaScript
\n \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Browserify. C \u043d\u0438\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f CommonJS \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ES6-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: Babel \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0435\u0433\u043e \u0432 ES5 \u043f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a Browserify \u0441\u043e\u0431\u0435\u0440\u0435\u0442 js. \u0418 \u043f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043c\u044b \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f jsHint \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430.<\/p>\n
\u0423 Browserify \u0435\u0441\u0442\u044c \u043e\u0434\u0438\u043d \u043c\u0438\u043d\u0443\u0441: \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 jQuery-\u043f\u043b\u0430\u0433\u0438\u043d), \u0442\u043e \u043e\u043d \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e UMD-\u043e\u0431\u0435\u0440\u0442\u043a\u0443. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0437\u0430\u043c\u0435\u043d\u044f\u044e Browserify \u043d\u0430 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044e \u0438 \u043f\u0438\u0448\u0443 \u043e\u0431\u0451\u0440\u0442\u043a\u0443 \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n
\u041e \u0431\u0430\u043d\u0434\u043b\u0430\u0445\u041d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0431\u043e\u0440\u043e\u0432 js\/css. <\/p>\n
\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b \u043f\u0438\u0448\u0438\u0442\u0435 \u0444\u0440\u043e\u043d\u0442 + \u0430\u0434\u043c\u0438\u043d\u043a\u0443. \u0418\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0432 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430\u0445: \u0431\u0435\u0437 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 jQuery-\u043f\u043b\u0430\u0433\u0438\u043d\u0430. \u042d\u0442\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432:<\/p>\n
\/* file: lib\/gulp\/config.js *\/ \/* \u0414\u043b\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 *\/ var bundles = [ { name : ‘myLib’, \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0431\u0430\u043d\u0434\u043b\u0430 global : ‘myLib’, \/\/ \u044d\u0442\u043e \u0438\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438\u043c\u0451\u043d compress : true, \/\/ \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c? (\u043d\u0435\u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430) saveToDist : true \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 `\/dist`? } ]; \/* \u0414\u043b\u044f \u0441\u0430\u0439\u0442\u0430 \/ \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438\u0437\u0435\u043c\u043b\u0435\u043d\u0438\u044f *\/ var bundles = [ { name : ‘app’, \/\/ \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0431\u0430\u043d\u0434\u043b\u0430 global : false, \/\/ \u043d\u0438\u0447\u0435\u043c \u043e\u0442\u0441\u0432\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u043d\u0430\u0434\u043e compress : true, \/\/ \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c? saveToDist : false \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 `\/dist`? }, name : ‘admin’, global : false, compress : true, saveToDist : false } ]; Github<\/p>\n
js\/css c\u0431\u043e\u0440\u0449\u0438\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 js\/css \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 end-point \u0444\u0430\u0439\u043b (`app.js` \u0438\u043b\u0438 `app.styl`). \u0427\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 end-point \u0444\u0430\u0439\u043b \u043c\u044b \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u0441\u0435\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u0430\u043d\u0434\u043b\u0430. \u0418\u0445 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u044f \u043f\u043e\u043a\u0430\u0436\u0443 \u0447\u0443\u0442\u044c \u043d\u0438\u0436\u0435.<\/p>\n
\u041f\u0435\u0440\u0435\u0434 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0443, \u043c\u044b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0447\u0435\u0440\u0435\u0437 \u0445\u0435\u043b\u043f\u0435\u0440 `bundler`, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438.Gulp\u041a\u043e\u043d\u0444\u0438\u0433<\/p>\n
\/* file: lib\/gulp\/config.js *\/ scripts: { bundles: bundler(bundles, _js, _src, _dist, _public), \/\/ \u043f\u0430\u043a\u0443\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u044b banner: ‘\/** ‘ + pkg.name + ‘ v’ + pkg.version + ‘ **\/\\n’, \/\/ \u0437\u0430\u0434\u0430\u0435\u043c \u0444\u043e\u0440\u043c\u0430\u0442 \u0431\u0430\u043d\u043d\u0435\u0440\u0430 \u0434\u043b\u044f min.js extensions: [‘.jsx’], \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f lint: { \/\/ \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f jshint options: pkg.lintOptions, dir: _src + _js } } Github<\/p>\n
\u0422\u0430\u0441\u043a<\/p>\n
\/* file: lib\/gulp\/tasks\/scripts.js *\/ var gulp = require(‘gulp’), browserify = require(‘browserify’), watchify = require(‘watchify’), uglify = require(‘gulp-uglify’), sourcemaps = require(‘gulp-sourcemaps’), derequire = require(‘gulp-derequire’), source = require(‘vinyl-source-stream’), buffer = require(‘vinyl-buffer’), rename = require(‘gulp-rename’), header = require(‘gulp-header’), gulpif = require(‘gulp-if’), notifier = require(‘..\/helpers\/notifier’), config = require(‘..\/config’).scripts; gulp.task(‘scripts’, function(cb) { \/\/ \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043a\u043e\u043b-\u0432\u043e \u0431\u0430\u043d\u0434\u043b\u043e\u0432 var queue = config.bundles.length; \/\/ \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e, \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \/\/ \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 bundle-\u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \/\/ \u043f\u043e\u0437\u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0435\u0451 \u0432 \u0446\u0438\u043a\u043b var buildThis = function(bundle) { \/\/ \u043e\u0442\u0434\u0430\u0435\u043c bundle browserify var pack = browserify({ \/\/ \u044d\u0442\u043e \u0434\u043b\u044f sourcemaps cache: {}, packageCache: {}, fullPaths: devBuild, \/\/ \u043f\u0443\u0442\u044c \u0434\u043e end-point (app.js) entries: bundle.src, \/\/ \u0435\u0441\u043b\u0438 \u043f\u0438\u0448\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c, \u0442\u043e \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \/\/ browserify \u043e\u0431\u0435\u0440\u043d\u0435\u0442 \u0432\u0441\u0451 \u0432 UMD-\u043e\u0431\u0435\u0440\u0442\u043a\u0443 \/\/ \u0438 \u043f\u0440\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043a\u0430\u043a bundle.global standalone: bundle.global, \/\/ \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f extensions: config.extensions, \/\/ \u043f\u0438\u0448\u0435\u043c sourcemaps? debug: devBuild }); \/\/ \u0441\u0431\u043e\u0440\u043a\u0430 var build = function() { return ( \/\/ browserify-\u0441\u0431\u043e\u0440\u043a\u0430 pack.bundle() \/\/ \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u043c browserify-\u0441\u0431\u043e\u0440\u043a\u0443 \u0432 vinyl .pipe(source(bundle.destFile)) \/\/ \u044d\u0442\u0430 \u0448\u0442\u0443\u043a\u0430 \u043d\u0443\u0436\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u043b `require` \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 .pipe(derequire()) \/\/ \u0435\u0441\u043b\u0438 dev-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438 \u043d\u0435\u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0432 `public\/` (\u0437\u0430\u0447\u0435\u043c — \u043d\u0435 \u043f\u043e\u043c\u043d\u044e)) .pipe(gulpif(devBuild, gulp.dest(bundle.destPublicDir))) \/\/ \u0435\u0441\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 `dist` — \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c .pipe(gulpif(bundle.saveToDist, gulp.dest(bundle.destDistDir))) \/\/ \u044d\u0442\u043e \u0434\u043b\u044f \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b sourcemaps \u043f\u0440\u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 .pipe(gulpif(bundle.compress, buffer())) \/\/ \u0435\u0441\u043b\u0438 dev-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438 \u043d\u0443\u0436\u043d\u0430 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c sourcemaps .pipe(gulpif(bundle.compress && devBuild, sourcemaps.init({loadMaps: true}))) \/\/ \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c .pipe(gulpif(bundle.compress, uglify())) \/\/ \u043a \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0443\u0444\u0444\u0438\u043a\u0441 `.min` .pipe(gulpif(bundle.compress, rename({suffix: ‘.min’}))) \/\/ \u0435\u0441\u043b\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0434\u043b\u044f production — \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0431\u0430\u043d\u043d\u0435\u0440 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u0438 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0440\u0435\u043b\u0438\u0437\u0430 .pipe(gulpif(!devBuild, header(config.banner))) \/\/ \u043f\u0438\u0448\u0435\u043c sourcemaps .pipe(gulpif(bundle.compress && devBuild, sourcemaps.write(‘.\/’))) \/\/ \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0432 `\/dist` .pipe(gulpif(bundle.saveToDist, gulp.dest(bundle.destDistDir))) \/\/ \u0438 \u0432 `public` .pipe(gulp.dest(bundle.destPublicDir)) \/\/ \u0432 \u043a\u043e\u043d\u0446\u0435 \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c callback handleQueue (\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043d\u0438\u0436\u0435) .on(‘end’, handleQueue) ); }; \/\/ \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u044b watchers if (global.isWatching) { \/\/ \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c browserify-\u0441\u0431\u043e\u0440\u043a\u0443 \u0432 watchify pack = watchify(pack); \/\/ \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438\u0437 \u0441\u0431\u043e\u0440\u043a\u0438 — \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0431\u0430\u043d\u0434\u043b pack.on(‘update’, build); } \/\/ \u0432 \u043a\u043e\u043d\u0446\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0431\u0430\u043d\u0434\u043b\u0430 var handleQueue = function() { \/\/ \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0441\u043e\u0431\u0440\u0430\u043b\u0438 notifier(bundle.destFile); \/\/ \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043e\u0447\u0435\u0440\u0435\u0434\u044c if (queue) { \/\/ \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c \u043d\u0430 1 queue—; \/\/ \u0435\u0441\u043b\u0438 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442, \u0442\u043e \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c, \u0447\u0442\u043e \u0442\u0430\u0441\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d if (queue === 0) cb(); } }; return build(); }; \/\/ \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u0432 \u0446\u0438\u043a\u043b config.bundles.forEach(buildThis); }); Github
\n \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043a\u0438 src\/js<\/p>\n
| src\/ |— js\/ |— components\/ # \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 |— helpers\/ # js-\u0445\u0435\u043b\u043f\u0435\u0440\u044b |— app.js # end-point \u0431\u0430\u043d\u0434\u043b\u0430 Github<\/p>\n
app.js
\n \u0427\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043c\u044b \u0440\u0443\u043b\u0438\u043c \u0432\u0441\u0435\u043c\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f js-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n
\/* file: src\/js\/app.js *\/ \/* Vendor *\/ import $ from ‘jquery’; \/* Components *\/ import myComponent from ‘.\/components\/my-component’; \/* App *\/ $(document).ready(() => { myComponent(); }); Github
\n \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435\u0442 \u0432 npm\u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c browserify-shim: \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 CommonJS-\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438. \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c jQuery-\u043f\u043b\u0430\u0433\u0438\u043d `maskedinput`, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0432 npm.<\/p>\n
\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 `package.json` \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0432\u044b\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438:<\/p>\n
\/* file: package.json *\/ "browserify": { "transform": [ "babelify", "browserify-shim" \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 ] }, \/\/ \u0443 `browserify-shim` \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \/\/ \u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0434\u043e\u043a\u0438 \u043d\u0430 github: https:\/\/github.com\/thlorenz\/browserify-shim "browser": { "maskedinput": ".\/path\/to\/jquery.maskedinput.js" }, "browserify-shim": { "maskedinput": { "exports": "maskedinput", "depends": [ "jquery:jQuery" ] } } <\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c:
\n require(‘maskedinput’); <\/p>\n
\u0421\u0431\u043e\u0440\u043a\u0430 CSS
\n \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c Stylus. \u041f\u043b\u044e\u0441 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e css \u0430\u0432\u0442\u043e\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0435\u0440\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0440\u0443\u043a\u0430\u043c\u0438.<\/p>\n
Gulp\u041a\u043e\u043d\u0444\u0438\u0433<\/p>\n
\/* file: lib\/gulp\/config.js *\/ css: { bundles: bundler(bundles, _css, _src, _dist, _public), \/\/ \u043f\u0430\u043a\u0443\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u044b src: _src + _css, \/\/ \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0433\u0434\u0435 \u043b\u0435\u0436\u0430\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0434\u043b\u044f watcher params: {}, \/\/ \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f stylus — \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0443\u0442 autoprefixer: { \/\/ \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c autoprefixer browsers: [‘> 1%’, ‘last 2 versions’], \/\/ \u043f\u043e\u0434\u043e \u0447\u0442\u043e \u0441\u0442\u0430\u0432\u0438\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b cascade: false \/\/ \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043d\u0435 \u043d\u0430\u0434\u043e, \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u043c }, compress: {} \/\/ \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 — \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0442\u0443\u0442 } Github<\/p>\n
\u0422\u0430\u0441\u043a<\/p>\n
\/* file: lib\/gulp\/tasks\/css.js *\/ var gulp = require(‘gulp’), process = require(‘gulp-stylus’), prefix = require(‘gulp-autoprefixer’), compress = require(‘gulp-minify-css’), gulpif = require(‘gulp-if’), rename = require(‘gulp-rename’), notifier = require(‘..\/helpers\/notifier’), config = require(‘..\/config’).css; \/* \u041b\u043e\u0433\u0438\u043a\u0430 css-\u0442\u0430\u0441\u043a\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 js-\u0442\u0430\u0441\u043a\u0430 *\/ gulp.task(‘css’, function(cb) { var queue = config.bundles.length; var buildThis = function(bundle) { var build = function() { return ( gulp.src(bundle.src) .pipe(process(config.params)) .pipe(prefix(config.autoprefixer)) .pipe(gulpif(bundle.compress, compress(config.compress))) .pipe(gulpif(bundle.compress, rename({suffix: ‘.min’}))) .pipe(gulp.dest(bundle.destPublicDir)) .on(‘end’, handleQueue) ); }; var handleQueue = function() { notifier(bundle.destFile); if (queue) { queue—; if (queue === 0) cb(); } }; return build(); }; config.bundles.forEach(buildThis); }); Github
\n \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043a\u0438 src\/css<\/p>\n
| src\/ |— css\/ |— components\/ # \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 |— header.styl |— footer.styl |— globals\/ |— fonts.styl # \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0444\u043e\u043d\u0442\u044b |— global.styl # \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 |— normalize.styl # \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u043c \/ \u0440\u0435\u0441\u0435\u0442\u0438\u043c |— variables.styl # \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 |— z-index.styl # z-\u0438\u043d\u0434\u0435\u043a\u0441\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430 |— helpers\/ |— classes.styl # \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b |— mixins.styl # \u0438 \u043c\u0438\u043a\u0441\u0438\u043d\u044b |— sprite\/ |— sprite.json # json, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 gulp.spritesmith |— sprite.styl # \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0438\u0437 json css-\u043a\u043b\u0430\u0441\u0441\u044b |— vendor\/ # \u0432\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 css \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u043c \u0441\u044e\u0434\u0430 |— app.styl # end-point \u0431\u0430\u043d\u0434\u043b\u0430 Github<\/p>\n
app.styl
\n \u0427\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043c\u044b \u0440\u0443\u043b\u0438\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f css-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0431\u0430\u043d\u0434\u043b\u0430.<\/p>\n
\/* file: src\/css\/app.styl *\/ @import "helpers\/mixins" @import "helpers\/classes" @import "globals\/variables" @import "globals\/normalize" @import "globals\/z-index" @import "globals\/fonts" @import "globals\/global" @import "sprite\/sprite" @import "vendor\/*" @import "components\/*" Github<\/p>\n
\u0412\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0430\u0441\u043a\u0438 \u2014 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u0438 \u043f\u0440. \u2014 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 (\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0441\u0442\u0430\u043b \u0443\u0436\u0435 \u0441\u0442\u0440\u043e\u0447\u0438\u0442\u044c). \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043b\u0435\u0436\u0430\u0442 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438: github.com\/alexfedoseev\/js-app-starter<\/p>\n
\u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043a\u043e\u0441\u044f\u043a\u0438 \u0438\u043b\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0439 \u0441\u0432\u044f\u0437\u0438 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0442\u0443\u0442 \u0438\u043b\u0438 issues \/ pull requests \u043d\u0430 Github. \u0423\u0434\u0430\u0447! \t \t \thttp:\/\/habrahabr.ru\/post\/251807\/<\/p>\n","protected":false},"excerpt":{"rendered":"\n
\u042f \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0430 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0431\u043e\u0440\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u0430. \u0417\u0430\u0434\u0430\u0447\u0430 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0438 \u0441\u0442\u043e\u0438\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e \u043d\u0435\u0439 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n
\u0427\u0442\u043e \u0443\u043c\u0435\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a:
\n \u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c front-end \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f development & production \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0439. \u0421\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e js\/css \u0431\u0430\u043d\u0434\u043b\u043e\u0432 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c CommonJS \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ES6-\u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u0421\u043f\u0440\u0430\u0439\u0442\u044b, \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435 <\/p>\n
\u0412\u0441\u0442\u0443\u043f\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435
\n \u0427\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0439 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u043c\u044b\u0441\u043b\u044c\u044e, \u0441\u0440\u0430\u0437\u0443 \u043a\u0438\u0434\u0430\u044e \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0430: github.com\/alexfedoseev\/js-app-starter<\/p>\n
\u041a\u0430\u043a \u0435\u0433\u043e \u0437\u0430\u0432\u0435\u0441\u0442\u0438\u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d npm.
\n npm -v <\/p>\n
\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 (\u0435\u0441\u043b\u0438 \u0435\u0449\u0451 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u044b):
\n npm install -g gulp browserify babel jade stylus http-server <\/p>\n
\u0421\u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u0444\u043e\u0440\u043a \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f.
\n git clone https:\/\/github.com\/alexfedoseev\/js-app-starter.git <\/p>\n
\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 (\u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u043a\u043e\u0440\u043d\u0435 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f):
\n npm install <\/p>\n
\u0421\u043e\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 development \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440:
\n npm start <\/p>\n
\u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u043d\u0430 lvh.me:3500<\/p>\n
\u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Gulp.
\n \u0427\u0442\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f:
\n \u0421\u0431\u043e\u0440\u043a\u0430 HTML
\n \u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440: Jade \u0421\u0431\u043e\u0440\u043a\u0430 CSS
\n \u041f\u0440\u0435\u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440: Stylus
\n \u041f\u0440\u0435\u0444\u0438\u043a\u0441\u0435\u0440: Autoprefixer \u0421\u0431\u043e\u0440\u043a\u0430 JS
\n \u041c\u043e\u0434\u0443\u043b\u044c\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430: Browserify + Babel (ES6 transpiler)
\n \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430: jsHint \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439
\n \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440: Imagemin \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438: \u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 json, \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u043d\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 public \u043f\u0430\u043f\u043a\u0443
\n \u0421\u0431\u043e\u0440\u0449\u0438\u043a \u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432: Spritesmith
\n \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 json: gulp-json-editor
\n \u0412\u043e\u0431\u0449\u0435 \u044f \u043b\u044e\u0431\u043b\u044e Slim \u0438 Sass, \u043d\u043e Ruby \u043a Ruby, a JS \u043a JS: \u0434\u043b\u044f frontend-\u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0448\u0442\u0443\u043a\u0438 \u0438\u0437 npm. \u041f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438 \u043b\u044e\u0431\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c.<\/p>\n
\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\n | dist\/ | lib\/ |— gulp\/ |— helpers\/ |— tasks\/ |— config.js | node_modules\/ | public\/ |— css\/ |— files\/ |— fonts\/ |— img\/ |— js\/ |— json\/ |— favicon.ico |— index.html | src\/ |— css\/ |— files\/ |— fonts\/ |— html\/ |— img\/ |— js\/ |— json\/ |— sprite\/ |— favicon.ico | .gitignore | .npmignore | gulpfile.js | npm-shrinkwrap.json | package.json Github<\/p>\n
.gitignore & .npmignore
\n \u0412\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f git \u0438 npm \u043f\u0440\u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u0430\u0445\/\u043f\u0430\u0431\u043b\u0438\u0448\u0430\u0445.<\/p>\n
node_modules\/
\n \u0412 \u044d\u0442\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0430\u0434\u0430\u044e\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0447\u0435\u0440\u0435\u0437 npm.<\/p>\n
npm-shrinkwrap.json
\n \u042f \u043d\u0435 \u0434\u0435\u0440\u0436\u0443 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 node_modules\/. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u043b\u043e\u0447\u0443 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b. \u041e\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439: `npm shrinkwrap`.<\/p>\n
package.json
\n \u042d\u0442\u043e \u0444\u0430\u0439\u043b \u0441 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041a \u043d\u0435\u043c\u0443 \u0435\u0449\u0451 \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f.<\/p>\n
gulpfile.js
\n \u041e\u0431\u044b\u0447\u043d\u043e \u0442\u0443\u0442 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0430\u0441\u043a\u0438 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0441 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 gulp-\u0442\u0430\u0441\u043a\u0430\u043c\u0438.<\/p>\n
lib\/gulp\/
\n \u0417\u0434\u0435\u0441\u044c \u0445\u0440\u0430\u043d\u0438\u043c \u0432\u0441\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n
|— config.js
\n \u0412\u044b\u043d\u043e\u0441\u0438\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0442\u0430\u0441\u043a\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u0447\u0442\u043e\u0431\u044b \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u043a\u0443 \u0441\u0430\u043c\u0438\u0445 \u0442\u0430\u0441\u043a\u043e\u0432.<\/p>\n
|— helpers\/
\n \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430.<\/p>\n
|— tasks\/
\n \u0418 \u0441\u0430\u043c\u0438 gulp-\u0442\u0430\u0441\u043a\u0438.<\/p>\n
src\/
\n \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n
public\/
\n \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441\u0431\u043e\u0440\u043a\u0438. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0451 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u043c \u0438 \u043f\u0435\u0440\u0435\u0434 \u043a\u0430\u0436\u0434\u043e\u0439 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043e\u043d\u0430 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0447\u0438\u0449\u0430\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0443\u0442 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u043c.<\/p>\n
dist\/
\n \u0418\u043d\u043e\u0433\u0434\u0430 \u044f \u043f\u0438\u0448\u0443 opensource-\u043c\u043e\u0434\u0443\u043b\u0438. \u0412 \u044d\u0442\u043e\u0439 \u043f\u0430\u043f\u043a\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044b\u0447\u043d\u0430\u044f \u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f public\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0434\u043b\u044f \u0434\u0435\u043c\u043a\u0438. \u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 \u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438\u0437\u0435\u043c\u043b\u0435\u043d\u0438\u044f, \u0442\u043e \u043e\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f.<\/p>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430
\n package.json
\n \u042d\u0442\u043e \u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.
\n \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0435\u0433\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0442\u0443\u0442: browsenpm.org\/package.json
\n \u041d\u0438\u0436\u0435 \u044f \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u0447\u0430\u0441\u0442\u044f\u0445.<\/p>\n
{ \/\/ \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 "name": "js-app-starter", \/\/ \u0412\u0435\u0440\u0441\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u0432\u0435\u0440\u0441\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \/ \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f js+css \u0432 \u043a\u044d\u0448\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 "version": "0.0.1", \/\/ \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435 js-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0442\u043e \u0442\u0443\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0443\u0442\u044c \u043a \u0444\u0430\u0439\u043b\u0443, \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 `require(‘your-lib’)` "main": ".\/dist\/app.js", \/\/ \u041d\u0430\u0441\u0442\u043e\u0439\u043a\u0438 browserify \/\/ \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c ES6 \u0432 ES5 "browserify": { "transform": [ "babelify" ] }, \/\/ \u041a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b (\u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043d\u0438\u0436\u0435) "scripts": { "start": "NODE_ENV=development http-server -a lvh.me -p 3500 & gulp", "build": "NODE_ENV=production gulp build" }, \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 jshint (\u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u0434\u0430) "lintOptions": { "esnext": true … }, \/\/ Frontend \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 "dependencies": { "jquery": "^2.1.3" … }, \/\/ Development \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 "devDependencies": { "gulp": "^3.8.11" … } } Github<\/p>\n
\u041a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b
\n \u0412 package.json \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0430\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0435\u043c \u0447\u0430\u0441\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n
"scripts": { "start": "NODE_ENV=development http-server -a lvh.me -p 3500 & gulp", "build": "NODE_ENV=production gulp build" } <\/p>\n
Development \u0441\u0431\u043e\u0440\u043a\u0430
\n \u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e:
\n \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 (\u0441 sourcemaps \u0434\u043b\u044f \u0434\u0435\u0431\u0430\u0433\u0430) \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u00ab\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439\u00bb, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440
\n # \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c npm start # \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 NODE_ENV=development http-server -a lvh.me -p 3500 & gulp
\n \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c# \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV=development # \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0430 \u0434\u043e\u043c\u0435\u043d\u0435 lvh.me \u0438 \u043f\u043e\u0440\u0442\u0435 3500 http-server -a lvh.me -p 3500 # \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c gulp \u0442\u0430\u0441\u043a\u0438 gulp <\/p>\n
Production \u0441\u0431\u043e\u0440\u043a\u0430
\n \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0440\u0435\u043b\u0438\u0437\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u2014 \u0434\u0435\u043b\u0430\u0435\u043c production-\u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n
# \u043d\u0430\u0436\u043c\u0438\u0442\u0435 Ctrl+C, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u044b # \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c npm run build # \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 NODE_ENV=production gulp build
\n \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c \u043f\u043e \u0447\u0430\u0441\u0442\u044f\u043c# \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f NODE_ENV=production # \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c gulp-\u0442\u0430\u0441\u043a `build` gulp build <\/p>\n
Gulp
\n \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a Gulp. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u0441\u043a\u043e\u0432 \u0432\u0437\u044f\u0442\u0430 \u0438\u0437 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430 \u043e\u0442 Dan Tello.<\/p>\n
\u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c, \u043a\u0430\u043a \u043d\u044b\u0440\u043d\u0443\u0442\u044c, \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043f\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e gulp-\u0442\u0430\u0441\u043a\u0430:<\/p>\n
var gulp = require(‘gulp’); gulp.task(‘task_1’, [‘pre_task_1’, ‘pre_task_2’], function() { console.log(‘task_1 is done’); }); \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438 `task_1`, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 `task_1 is done` \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043e\u043d \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 `gulp task_1` \/\/ \u041d\u043e \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e `task_1` \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c\u0441\u044f \u0437\u0430\u0434\u0430\u0447\u0438 `[‘pre_task_1’, ‘pre_task_2’]` \/\/ \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e ‘pre_task_1’ & ‘pre_task_2’ — \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \/\/ \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0437\u0438\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435, \/\/ \u0430 `task_1` \u0441\u0442\u0430\u0440\u0442\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 2 pre-\u0437\u0430\u0434\u0430\u0447\u0438 — \u0442\u043e \u0435\u0441\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e <\/p>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0447\u0442\u043e \u0438 \u0432 \u043a\u0430\u043a\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c.<\/p>\n
Development \u0441\u0431\u043e\u0440\u043a\u0430
\n `npm start` \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 `gulp`. \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u0430\u043b\u044c\u0448\u0435:<\/p>\n
Gulp \u0438\u0449\u0435\u0442 \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 gulpfile.js. \u041e\u0431\u044b\u0447\u043d\u043e \u0432 \u043d\u0435\u0433\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0442\u0430\u0441\u043a\u0438, \u043d\u043e \u0437\u0434\u0435\u0441\u044c \u043e\u043d \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u0442 \u043d\u0430\u0441 \u0434\u0430\u043b\u044c\u0448\u0435 \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 gulp-\u0442\u0430\u0441\u043a\u0430\u043c\u0438.<\/p>\n
\u041a\u043e\u0434 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438\/* file: gulpfile.js *\/ \/\/ \u043c\u043e\u0434\u0443\u043b\u044c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0442\u0430\u0441\u043a\u0438 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0439 var requireDir = require(‘require-dir’); \/\/ \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \/\/ \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u0439 \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c \u0432 \u0442\u0430\u0441\u043a\u0430\u0445 development & production \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f global.devBuild = process.env.NODE_ENV !== ‘production’; \/\/ \u043f\u0440\u043e\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0432 \u043f\u0430\u043f\u043a\u0443 \u0441 \u0442\u0430\u0441\u043a\u0430\u043c\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u043c requireDir(‘.\/lib\/gulp\/tasks’, { recurse: true }); Github<\/p>\n
\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043d\u0430\u0441 \u043f\u0440\u043e\u0431\u0440\u043e\u0441\u0438\u043b\u043e \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u0438\u0449\u0435\u0442 \u0442\u0430\u0441\u043a \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c `default`, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u00ab\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439\u00bb \u043d\u0430\u0434 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u043c\u0438, \u043f\u043e\u0442\u043e\u043c:
\n \u043e\u0447\u0438\u0449\u0430\u0435\u0442 \u043f\u0430\u043f\u043a\u0438 `public\/` & `dist\/` \u043b\u0438\u043d\u0442\u0438\u0442 js-\u0444\u0430\u0439\u043b\u044b \u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0441\u043f\u0440\u0430\u0439\u0442\u044b
\n \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0435\u043a\u0442 (html, css, js \u0438 \u0432\u0441\u0451 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435).<\/p>\n
\u041a\u043e\u0434 \u0441 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c\u0438default<\/p>\n
\/* file: lib\/gulp\/tasks\/default.js *\/ var gulp = require(‘gulp’); \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 \u0442\u0430\u0441\u043a `default`, \u043d\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0442\u0430\u0441\u043a `watch` gulp.task(‘default’, [‘watch’]); Github<\/p>\n
watch<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-252222","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/252222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=252222"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/252222\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=252222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=252222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=252222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}