? ???? ?? ?? ? Gulp Processing? ?? ??? ?? ??????. ? Watch ??? ???? ?? CSS? ????? ??? ??? ?? ?? ???? ? ??? ?? ?? ?? ??? ? ????. ??? ?? ???? ???? ?? ?? ??? ??? ??? (?? ???… ??? ??? ???? ?????).

? ??? ?? ??? ???? ?? ?? ?? ????. ?? 3.x ?? Gulp 4.x? ???? ?? ??? ??????? ?? Gulp.series ???? ??? ???? ??? ? ???? ??????.

Gulp 4.x ? ?? ?? ???? ??? ???????. ? ??? Gulp 4? CLI ??? 2.x? ????? ?? Gulp 3? ?? ??? ? 3.x ??? ????? ????. ????? ?? ??? ?? ???? ?????, ????? ?? 10 ? ??? ??? ??? ? ???? Cli 3.x? ??? ????? ??? ???? ???? ?? ? ????.

?? Savvier Command-Line ???? ??? ? ?? ??? ?? ? ? ??? ?????, ???? ?? -v gulp? Gulp? ??? ?? ?? ??? ????/usr/local/share/npm/bin/gulp? ??? ???? ??? ???? ?? ???? 2.x? ?? ??????.

Gulp 4.x? ??? ? ???? Gulpfile.js? ? ?? ???? ?? ???? ?? ??? ???? ????. ??? ????? ????? ? ??? ?? ?? ??? ???? ????? ??? ????? ????. ?? ?? ???? ?? ??? ?? ??? ?? ? ???? ?? ?????? ????.

? ?? gulpile??? ?

• ??? ?? ? ?? ??? ?? ? ?? (BrowserSync)? ?????.
• ??? ???? ??? ??? ???? ?? ??? ???? ?? ?? ??? (Native Gulp ??)? ?????.
• CSS ??
  • sass> autoprefixer> ??
  • ????? ??? ?? ??? ???? (? :
  • Style.css? WordPress ??? ??? ??? ?? ?? ??? ??? ?? ??
• ?? ???? ??
  • ??> ? ?????> ??
  • s? ???? ??? ??????
  • ??? ?? ? ???? ?? ??? ??????
• SVG ??
  • SVG ????? ( s? ??? ?????
  • sprite.php ??? ??? ???? (???? php? ??? ? ??) ?? ???? ?????.
• PHP ??
  • ??? ?? ? ? JavaScript? Ajax ??? ?? ???? ????????.

?? ??!

 const gulp = ?? ( "gulp"),
  browsersync = require ( "browser-sync"). create (),
  sass = require ( "gulp-sass"),
  postcss = require ( "gulp-postcss"),
  autopRefixer = require ( "autopRefixer"),
  cssnano = require ( "cssnano"),
  del = require ( "del"),
  babel = require ( "gulp-babel"),
  minify = require ( "gulp-minify"),
  concat = require ( "gulp-concat"),
  Rename = ?? ?? ( "Gulp-Rename"),
  replace = require ( "gulp-replace"),
  svgsymbols = require ( "gulp-svg-symbols"),
  svgmin = ?? ?? ( "gulp-svgmin");

const paths = {
  ??? : {
    src : [ "./scss/*.scss", "./art-direction/*.scss"],
    DEST : "./css/"
  },
  ???? : {
    src : [ "./js/*.js", "./js/libs/* js", "! ./ js/min/*. js"],
    DEST : "./js/min"
  },
  SVG : {
    SRC : "./icons/* .svg"
  },
  PHP : {
    src : [ "./*.php", "./ads/*.php", "./art-direction/* .php", "./parts/**/*.php"]
  },
  ?? : {
    SRC : "./ads/* .php"
  }
};

/ * ??? */
?? dostyles (??) {
  gulp.series (???, movemainstyle, deleteoldmainstyle, done => {
    CACHEBUST ( "./ header.php", "./");
    ??();
  })(??);
}

?? ??? () {
  Gulp? ?????
    .Src (paths.styles.src)
    .pipe (sass ())
    .on ( "??", sass.logerror)
    .pipe (postcss ([autoprefixer (), cssnano ()]))
    .pipe (gulp.dest (paths.styles.dest))
    .pipe (browsersync.stream ());
}

?? movemainstyle () {
  gulp.src ( "./ css/style.css"). ??? (gulp.dest ( "./"));
}

?? deleteoldMainStyle () {
  return del ( "./ css/style.css");
}
/ * ? ??? */

/ * ???? */
?? doscripts (??) {
  gulp.series ?? (
    ?? ??,
    concatjs,
    Minifyjs,
    deleteartifactjs,
    ????,
    ?? => {
      CACHEBUST ( "./ parts/footer-scripts.php", "./parts/");
      ??();
    }
  )(??);
}

?? preprocessjs () {
  Gulp? ?????
    .src (paths.scripts.src)
    .???(
      ??({
        ?? ?? : [ "@babel/env"],
        ???? : [ "@babel/plugin-proposal class-class-class-class-properties"]
      })
    ))
    .pipe (gulp.dest ( "./ js/babel/"));
}

?? concatjs () {
  Gulp? ?????
    .Src ([
      "JS/libs/jquery.lazy.js",
      "JS/libs/jquery.fitvids.js",
      "JS/libs/jQuery.resizable.js",
      "JS/Libs/Prism.js",
      "JS/Babel/Highlighting-Fixes.js",
      "JS/Babel/Global.js"
    ])))
    .pipe (concat ( "global-concat.js"))
    .pipe (gulp.dest ( "./ js/concat/"));
}

?? minifyjs () {
  Gulp? ?????
    .src ([ "./ js/babel/*. js", "./js/concat/* .js"]))))
    .???(
      ?? ??({
        ?? : {
          SRC : ".js",
          ? : ".min.js"
        }
      })
    ))
    .pipe (gulp.dest (paths.scripts.dest));
}

?? deleteartifactjs () {
  return del ([
    "./js/babel",
    "./js/concat",
    "./js/min/*.js",
    "! ./ js/min/*. min.js"
  ]);
}
/ * ?? ???? */

/ * svg */
?? dosvg () {
  Gulp? ?????
    .SRC (Paths.svg.src)
    .pipe (svgmin ())
    .???(
      svgsymbols ({
        ??? : [ "Default-SVG"],
        svgattrs : {
          ?? : 0,
          ?? : 0,
          ????? : "??"
        }
      })
    ))
    .pipe (?? ??? ( "???/?????/??? .php"))
    .pipe (gulp.dest ( "./"));
}
/ * ?? svg */

/ * ???? ? */
?? ?? ??? (SRC, DEST) {
  var cbstring = new date (). gettime ();
  Gulp? ?????
    .SRC (SRC)
    .???(
      ?? ( /cache_bust = \ d /g, function () {
        "CACHE_BUST ="CBSTRING? ?????.
      })
    ))
    .pipe (gulp.dest (dest));
}

?? Reload (??) {
  Browsersync.reload ();
  ??();
}

?? Watch () {
  browsersync.init ({
    ??? : "csstricks.local"
  });
  gulp.watch (paths.styles.src, dostyles);
  gulp.watch (paths.scripts.src, doscripts);
  gulp.watch (paths.svg.src, dosvg);
  gulp.watch (paths.php.src, Reload);
  gulp.watch (paths.ads.src, done => {
    CACHEBUST ( "./ js/global.js", "./js/");
    ??();
  });
}

gulp.task ( "??", ??);

?? / ??

• ??? ??? ??? ????? ?? ???? ???? ????. CSS? ???? ?? ???? ??? ?? ??? ??? ??? ????.
• ??? PHP??? SVG ???? ??? ???? ?????? ??? ()? ?????.
• ?? SVG? ??? ?? ??? ??? SVG ????? ?????.
• Gulp ??? ?? ?????? ????? ?? ?? ?? ??? ?? ? ?? ????? ??? ? ?? ???? ?????
• gulpfile.js ???? Gulp? ?? ????????
• ?? ??? ?? Libs? ES6 ????? ???? ???? ?? ??? ??? ? ??? ?? ????.

?? ? ??? ?? ?? ? ????. ?????, ??? ??? ??? ?? ??? ?????. ?? ?? ??? ???? ?????.

? ??? gulpile ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!