const gulp = require("gulp"); const { src, dest, series, parallel } = require("gulp"); const autoprefixer = require("autoprefixer"), postcss = require("gulp-postcss"), sass = require("gulp-sass"), sourcemaps = require("gulp-sourcemaps"), del = require("del"), webpack = require("webpack-stream"), webpackConfig = require("./webpack.config.js"), modernizr = require("gulp-modernizr"), svgSprite = require("gulp-svg-sprite"), rename = require("gulp-rename"), imagemin = require("gulp-imagemin"), browserSync = require("browser-sync").create(); // JS TASKS function cleanScripts() { return del("./app/temp/scripts/App.js"); } function modernizrTask() { return src(["./app/assets/scss/**/*.scss", "./app/assets/js/**/*.js"]) .pipe( modernizr({ options: ["setClasses"], }) ) .pipe(dest("./app/assets/temp")); } function scriptsTask() { return ( src("./app/assets/js/App.js") .pipe( webpack(webpackConfig, null, function (err, stats) { if (err) { console.log(err); } }) ) // .on('error', function (err) { if(err){ console.log(err.message);} }) .pipe(dest("./app/temp/scripts")) .pipe(browserSync.stream()) ); } function endCleanModernizr() { return del(["./app/assets/temp"]); } // SCSS TASKS function scssTask() { return src("./app/assets/scss/**/*.scss") .pipe(sourcemaps.init()) .pipe(sass().on("error", sass.logError)) .pipe(postcss([autoprefixer()])) .pipe(sourcemaps.write(".")) .pipe(dest("app/temp/styles")) .pipe(browserSync.stream()); } // ICONS TASK var config = { mode: { css: { sprite: "sprite.svg", render: { css: { template: "./gulp/templates/sprite.css", }, }, }, }, }; function beginClean() { return del(["./app/temp/sprite", "-/app/assets/media/images/sprites"]); } function createSprite() { return src("./app/assets/media/images/icons/**/*.svg") .pipe(svgSprite(config)) .pipe(dest("./app/temp/sprite/")); } function copySpriteGraphic() { return src("./app/temp/sprite/css/**/*.svg").pipe( dest("./app/assets/media/images/sprites") ); } function copySpriteCSS() { return src("./app/temp/sprite/css/*.css") .pipe(rename("_sprite.scss")) .pipe(dest("./app/assets/scss/modules")); } function endClean() { return del("./app/temp/sprite"); } // WATCH TASK const watch = function () { browserSync.init({ notify: false, server: { baseDir: "./app", }, }); gulp .watch( "./app/assets/scss/**/*.scss", { usePolling: true }, gulp.series(scssTask) ) .on("change", browserSync.reload); gulp.watch( "./app/assets/js/**/*.js", { usePolling: true }, gulp.series(cleanScripts, modernizrTask, scriptsTask, endCleanModernizr) ); // gulp.watch("./app/assets/images", {usePolling : true}, gulp.series(imagesTask)); gulp.watch("./app/*.html").on("change", browserSync.reload); }; // IMAGE TASK function imagesTask() { return src([ "./app/assets/media/images/**/*", "./app/temp/media/images/**/*", "!./app/assets/media/images/icons", "!./app/assets/media/images/icons/**/*", ]) .pipe( imagemin({ progressive: true, interlaced: true, multipass: true, }) ) .pipe(dest("./docs/assets/media/images")); } exports.watch = watch; exports.icons = series( beginClean, createSprite, copySpriteGraphic, copySpriteCSS, endClean ); exports.images = imagesTask;