{"id":208890,"date":"2014-01-13T12:43:03","date_gmt":"2014-01-13T08:43:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=208890"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=208890","title":{"rendered":"<span class=\"post_title\">GulpJS \u2014 \u0444\u0430\u043d\u0442\u0430\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t<a href=\"http:\/\/gulpjs.com\/\">Gulp.js<\/a> \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u044b\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 JS. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Stream \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0433\u0434\u0435 \u043e\u043a\u043e\u043b\u043e \u0442\u044b\u0441\u044f\u0447\u0438 stylus \u0444\u0430\u0439\u043b\u043e\u0432, GruntJS \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 2.5 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043d\u0430 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 autoprefixer&#8217;\u043e\u043c. Gulp \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 0.5 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u044f \u0443 GruntJS \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432 4 \u0440\u0430\u0437\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/80b\/368\/627\/80b3686271c00326be8ef339b2e91e6b.png\"\/><\/p>\n<p>  \u0412\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0443\u0433\u043d\u0443\u0442\u044c \u043c\u043e\u043b\u043e\u0434\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043f\u043e\u0434 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 165 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 <a href=\"http:\/\/gratimax.github.io\/search-gulp-plugins\/\">\u0442\u0443\u0442<\/a>. <\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043c\u044b \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Jade \u0438 Stylus, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c Livereload. \u041f\u0440\u043e\u0435\u043a\u0442 \u044f \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430 <a href=\"https:\/\/github.com\/exdeniz\/gulp-scaffold\">Github<\/a>, \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435. <\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h5>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Gulp<\/h5>\n<p>  \u0423 \u0432\u0430\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d Node.JS \u0438 npm.<br \/>  \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432 \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c Gulp \u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b. <\/p>\n<h6>\u0421\u0442\u0440\u0443\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430:<\/h6>\n<p>  <\/p>\n<pre><code class=\"bash\">|--\/assets \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b |--|--\/template |--|--\/stylus |--|--\/js |--|--\/img |--\/build \/\/ \u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0440\u0435\u043b\u0438\u0437\u0430 |--\/public \/\/ \u041a\u0430\u0442\u0430\u043b\u043e\u0433 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 |--package.json |--gulpfile.js <\/code><\/pre>\n<h6>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430:<\/h6>\n<p>  <\/p>\n<pre><code class=\"bash\">$ mkdir assets public build assets\/js assets\/img assets\/stylus assets\/template $ touch gulpfile.js $ sudo npm install gulp -g $ npm init $ npm install gulp gulp-jade gulp-stylus gulp-livereload gulp-myth gulp-csso gulp-imagemin gulp-uglify gulp-concat gulp-concat connect --save-dev <\/code><\/pre>\n<p>  \u0412 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 gulpfile.js \u0435\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c. <\/p>\n<h6>\u0418\u043d\u0438\u0446\u0438\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u044b:<\/h6>\n<p>  <\/p>\n<pre><code class=\"javascript\">var lr = require('tiny-lr'), \/\/ \u041c\u0438\u043d\u0438\u0432\u0435\u0431\u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f livereload     gulp = require('gulp'), \/\/ \u0421\u043e\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e Gulp JS     jade = require('gulp-jade'), \/\/ \u041f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f Jade     stylus = require('gulp-stylus'), \/\/ \u041f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f Stylus     livereload = require('gulp-livereload'), \/\/ Livereload \u0434\u043b\u044f Gulp     myth = require('gulp-myth'), \/\/ \u041f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f Myth - http:\/\/www.myth.io\/     csso = require('gulp-csso'), \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f CSS     imagemin = require('gulp-imagemin'), \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439     uglify = require('gulp-uglify'), \/\/ \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f JS     concat = require('gulp-concat'), \/\/ \u0421\u043a\u043b\u0435\u0439\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0432     connect = require('connect'), \/\/ Webserver     server = lr(); <\/code><\/pre>\n<h6>\u0417\u0430\u0434\u0430\u0447\u0438:<\/h6>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u0443\u044e \u0437\u0430\u0434\u0430\u0447\u0443  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c Stylus gulp.task('stylus', function() {     gulp.src('.\/assets\/stylus\/screen.styl')         .pipe(stylus({             use: ['nib']         })) \/\/ \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c stylus     .on('error', console.log) \/\/ \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438, \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c     .pipe(myth()) \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b - http:\/\/www.myth.io\/     .pipe(gulp.dest('.\/public\/css\/')) \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c css     .pipe(livereload(server)); \/\/ \u0434\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 css }); <\/code><\/pre>\n<p>  \u0412 Gulp \u043c\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u043f\u043e\u0442\u043e\u043a\u043e\u043c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 gulp.src \u0438 \u043f\u043e\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0438\u0445. <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0422\u0430\u043a \u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 Jade, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 JS<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">\/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c html \u0438\u0437 Jade  gulp.task('jade', function() {     gulp.src(['.\/assets\/template\/*.jade', '!.\/assets\/template\/_*.jade'])         .pipe(jade({             pretty: true         }))  \/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c Jade \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0430\u043f\u043a\u0435 .\/assets\/template\/ \u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044f \u0444\u0430\u0439\u043b\u044b \u0441 _*         .on('error', console.log) \/\/ \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438, \u0432\u044b\u0432\u043e\u0434\u0438\u043c \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c     .pipe(gulp.dest('.\/public\/')) \/\/ \u0417\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b     .pipe(livereload(server)); \/\/ \u0434\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b });     \/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c JS gulp.task('js', function() {     gulp.src(['.\/assets\/js\/**\/*.js', '!.\/assets\/js\/vendor\/**\/*.js'])         .pipe(concat('index.js')) \/\/ \u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 JS, \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 .\/assets\/js\/vendor\/**         .pipe(gulp.dest('.\/public\/js'))         .pipe(livereload(server)); \/\/ \u0434\u0430\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u043d\u0430 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b });    \/\/ \u041a\u043e\u043f\u0438\u0440\u0443\u0435\u043c \u0438 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f  gulp.task('images', function() {     gulp.src('.\/assets\/img\/**\/*')         .pipe(imagemin())         .pipe(gulp.dest('.\/public\/img'))  });  <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0414\u043b\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440  <\/p>\n<pre><code class=\"javascript\">\/\/ \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 gulp.task('http-server', function() {     connect()         .use(require('connect-livereload')())         .use(connect.static('.\/public'))         .listen('9000');      console.log('Server listening on http:\/\/localhost:9000'); }); <\/code><\/pre>\n<p>  \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0432\u044b\u0448\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0438\u043c\u0435\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 Livereload<br \/>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0443 &#8216;watch&#8217;.<\/p>\n<pre><code class=\"javascript\">\/\/ \u0417\u0430\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 gulp watch gulp.task('watch', function() {     \/\/ \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430     gulp.run('stylus');     gulp.run('jade');     gulp.run('images');     gulp.run('js');      \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c Livereload     server.listen(35729, function(err) {         if (err) return console.log(err);          gulp.watch('assets\/stylus\/**\/*.styl', function() {             gulp.run('stylus');         });         gulp.watch('assets\/template\/**\/*.jade', function() {             gulp.run('jade');         });         gulp.watch('assets\/img\/**\/*', function() {             gulp.run('images');         });         gulp.watch('assets\/js\/**\/*', function() {             gulp.run('js');         });     });     gulp.run('http-server'); }); <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.   <\/p>\n<pre><code class=\"bash\">$ gulp watch <\/code><\/pre>\n<p>  \u0421\u0435\u0440\u0432\u0435\u0440 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 localhost:9000 \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0441\u0440\u0435\u0434\u0443 \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Stylus \u0438 Jade \u0441 Livereload. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u0434\u0430\u0447\u0443 &#8216;build&#8217;<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0421\u0431\u043e\u0440\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">gulp.task('build', function() {     \/\/ css     gulp.src('.\/assets\/stylus\/screen.styl')         .pipe(stylus({             use: ['nib']         })) \/\/ \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c stylus     .pipe(myth()) \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b - http:\/\/www.myth.io\/     .pipe(csso()) \/\/ \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c css     .pipe(gulp.dest('.\/build\/css\/')) \/\/ \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c css      \/\/ jade     gulp.src(['.\/assets\/template\/*.jade', '!.\/assets\/template\/_*.jade'])         .pipe(jade())         .pipe(gulp.dest('.\/build\/'))      \/\/ js     gulp.src(['.\/assets\/js\/**\/*.js', '!.\/assets\/js\/vendor\/**\/*.js'])         .pipe(concat('index.js'))         .pipe(uglify())         .pipe(gulp.dest('.\/build\/js'));      \/\/ image     gulp.src('.\/assets\/img\/**\/*')         .pipe(imagemin())         .pipe(gulp.dest('.\/build\/img'))  }); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u043f\u0430\u043f\u043a\u0435 build  <\/p>\n<pre><code class=\"bash\">$ gulp build <\/code><\/pre>\n<p>  \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 GulpJS \u0438 \u043d\u0430\u0447\u043d\u0438\u0442\u0435 \u0443\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e-\u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u043c\u0443 \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0432\u0435\u0449\u0438 \u0432 \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/208890\/\"> http:\/\/habrahabr.ru\/post\/208890\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t<a href=\"http:\/\/gulpjs.com\/\">Gulp.js<\/a> \u044d\u0442\u043e \u043f\u043e\u0442\u043e\u043a\u043e\u0432\u044b\u0439 \u0441\u0431\u043e\u0440\u0449\u0438\u043a \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 JS. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Stream \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u044b\u043c. \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0433\u0434\u0435 \u043e\u043a\u043e\u043b\u043e \u0442\u044b\u0441\u044f\u0447\u0438 stylus \u0444\u0430\u0439\u043b\u043e\u0432, GruntJS \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e 2.5 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043d\u0430 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 autoprefixer&#8217;\u043e\u043c. Gulp \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430 0.5 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u044f \u0443 GruntJS \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0432 4 \u0440\u0430\u0437\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habr.habrastorage.org\/post_images\/80b\/368\/627\/80b3686271c00326be8ef339b2e91e6b.png\"\/><\/p>\n<p>  \u0412\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043f\u0443\u0433\u043d\u0443\u0442\u044c \u043c\u043e\u043b\u043e\u0434\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a, \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u043f\u043e\u0434 \u0437\u0430\u0434\u0430\u0447\u0438 \u0434\u043b\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 165 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0445 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 <a href=\"http:\/\/gratimax.github.io\/search-gulp-plugins\/\">\u0442\u0443\u0442<\/a>. <\/p>\n<p>  \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438, \u043c\u044b \u0441\u043e\u0431\u0435\u0440\u0435\u043c \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f Jade \u0438 Stylus, \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c Livereload. \u041f\u0440\u043e\u0435\u043a\u0442 \u044f \u0432\u044b\u043b\u043e\u0436\u0438\u043b \u043d\u0430 <a href=\"https:\/\/github.com\/exdeniz\/gulp-scaffold\">Github<\/a>, \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u0439\u0442\u0435. <\/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-208890","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/208890","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=208890"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/208890\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=208890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=208890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=208890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}