diff --git a/README.md b/README.md index ad581dd..99ad65e 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,12 @@ Web Starter Kit (WSK) - is an opinionated boilerplate for web development. Tools 9. [Templating](#templating) 10. [Styles](#styles) 11. [JavaScript](#javascript) -12. [Tasks](#tasks) -13. [Troubleshooting](#troubleshooting) -14. [Contributing](#contributing) -15. [License](#license) +12. [Watching](#watching) +13. [Images copy and minify](#images-copy-and-minify) +14. [Tasks](#tasks) +15. [Troubleshooting](#troubleshooting) +16. [Contributing](#contributing) +17. [License](#license) ## Browser Support @@ -36,7 +38,7 @@ At present, we officially aim to support the last two versions of the following * Firefox * Safari * iOS -* Android 5+ +* ChromeAndroid This is not to say that WSK cannot be used in browsers older than those reflected, but merely that our focus will be on ensuring our layouts work great in the above. @@ -128,7 +130,9 @@ You may also want to get used to some of the [commands](#commands) available. There are few commands available to help you build and test sites: -### Watch For Changes & Automatically Refresh Across Devices +### Development mode + +Watch For Changes & Automatically Refresh Across Devices ```sh $ gulp @@ -139,7 +143,9 @@ This includes linting as well as image, script, stylesheet and HTML optimization Also, a [browsersync](https://browsersync.io/) script will be automatically generated, which will take care of precaching your sites resources. -### Serve the Fully Built & Optimized Site +### Production mode + +Serve the Fully Built & Optimized Site ```sh $ gulp build @@ -247,15 +253,15 @@ So while normal CSS doesn’t yet allow things like variables, mixins (reusable * After installing the extension you must **include** its **css** or **sass** files in `src/vendor_entries/vendor.scss` using `@import`. You are able to add your own **custom sass files** and optionally **disable/enable** [postcss-sort-css-media-queries](https://github.com/solversgroup/postcss-sort-media-queries). -You can see this property `getPathesForStylesCustom` in the `gulp-config.js` file: +You can see this property `getFilesForStylesCustom` in the `gulp-config.js` file: -![image](https://user-images.githubusercontent.com/38295556/72220657-88b3c400-355b-11ea-90d7-4cbb5edb0f43.png) +![image](https://user-images.githubusercontent.com/38295556/72877232-2c8e3400-3d01-11ea-9653-ffd6fec69b28.png) Please don't forget to link all your **styles custom files** in **html** file: ![image](https://user-images.githubusercontent.com/38295556/72220723-4b036b00-355c-11ea-841a-ce218c304aed.png) -Also, you might want to add files to the ignore list (check `getPathesToCopyForProduction` and `getPathesToCopy` properties in the `gulp-config.js` file). By default they will be copied to the `assets` and `production` folders. +Also, you might want to add files to the ignore list (check `getFilesToCopyProd` and `getFilesToCopy` properties in the `gulp-config.js` file). By default they will be copied to the `assets` and `production` folders. In our WSK you can use [PostCSS](https://postcss.org/). PostCSS is a tool for transforming CSS with JavaScript. Currently, PostCSS has more than 200 plugins. You can find all of the plugins in the [plugins list](https://github.com/postcss/postcss/blob/master/docs/plugins.md). @@ -288,6 +294,16 @@ In **production** mode we use: For linting javascript files in WSK used [esLint](https://eslint.org/). esLint a linter tool for identifying and reporting on patterns in JavaScript (used [airbnb-base rules](https://www.npmjs.com/package/eslint-config-airbnb-base)) and some custom rules in file configuration `.eslintrc`. +## Watching + +After run `gulp` by default gulp watching for your files in `src` and `assets` folders. +For `js`, `scss`, `html` and `vendors_entries` folders after change in included files, watcher run they tasks for compiling. For `images` and other folders (and files in `src` root) watcher run tasks for copy files. + +## Images copy and minify + +In our WSK by default in [development and production mode](#commands), task `build-images` only copy images. +For minify images used [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin). If you want to minify your images in production mode, please switch option `buildImages.isImageMin = true` in `gulp-config.js`. + ## Tasks | Task | Description | @@ -301,11 +317,11 @@ For linting javascript files in WSK used [esLint](https://eslint.org/). esLint a | build-styles-vendors | Compiles all vendor styles from `src/vendor_entries` to `assets/css` folder. | | clean-build | Cleaning `assets` folder. | | clean-production | Cleaning `production` folder. | -| copy-folders-production | Copy all folders & files from `assets` to `production`. | -| copy-folders | Copy all not compiling files & folders from `src` to `assets`. | +| copy-files | Copy all not compiling files & folders from `src` to `assets`. | +| copy-files-production | Copy all files & folders from `assets` to `production`. | | lint-html | Need to lint html files. | | lint-js | Need to lint & fix js files. | -| image-min | We use this to minify images. | +| build-images | We use this to copy images & minify for production. | | watch | Task for watching all the changes. | ## Troubleshooting diff --git a/gulp-config.js b/gulp-config.js index f178834..62fb5a7 100644 --- a/gulp-config.js +++ b/gulp-config.js @@ -13,10 +13,10 @@ module.exports = { vendorJs: 'vendor.js', vendorJsMin: 'vendor.min.js', vendorJsTemp: 'vendor.temp.js', - mainScss: 'styles.scss', - mainScssMin: 'styles.min.css', - vendorScss: 'vendor.scss', - vendorScssMin: 'vendor.min.css', + mainStyles: 'styles.css', + mainStylesMin: 'styles.min.css', + vendorStyles: 'vendor.css', + vendorStylesMin: 'vendor.min.css', }, buildHtml: { templates: 'src/html/templates', @@ -26,6 +26,10 @@ module.exports = { // Sorting type css media queries: 'desktop-first' || 'mobile-first' sortType: 'desktop-first', }, + buildImages: { + imageExtensions: 'jpg,jpeg,png,svg,gif,ico', + isImageMin: false, + }, task: { lintHtml: 'lint-html', lintJs: 'lint-js', @@ -35,28 +39,31 @@ module.exports = { buildStyles: 'build-styles', buildStylesCustom: 'build-styles-custom', buildStylesVendors: 'build-styles-vendors', - imageMin: 'image-min', + buildImages: 'build-images', cleanProd: 'clean-production', cleanBuild: 'clean-build', - copyFolders: 'copy-folders', - copyFoldersProd: 'copy-folders-production', + copyFiles: 'copy-files', + copyFilesProd: 'copy-files-production', browserSync: 'browser-sync-server', watch: 'watch', }, - imageExtensions: 'jpg|jpeg|png|svg|gif|ico|tiff', - getPathesForStylesCustom: function () { + error: { + icon: './sys_icon/error_icon.png', + wait: true, + }, + getFilesForStylesCustom: function() { return { files: [], isGcmq: false, }; }, - getPathesToCopyForProduction: function () { + getFilesToCopyProd: function() { return [ `./${this.folder.build}/**`, '.htaccess', ]; }, - getPathesToCopy: function () { + getFilesToCopy: function() { return [ `./${this.folder.src}/**`, `!{${this.folder.src}/images,${this.folder.src}/images/**}`, diff --git a/gulpfile.js b/gulpfile.js index a1eb293..d5677e7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -93,6 +93,16 @@ requireTask(`${cfg.task.buildHtml}`, `./${cfg.folder.tasks}/`, { templates: cfg.buildHtml.templates, dest: cfg.buildHtml.dest, + mainJs: cfg.file.mainJs, + mainJsMin: cfg.file.mainJsMin, + vendorJs: cfg.file.vendorJs, + vendorJsMin: cfg.file.vendorJsMin, + mainStyles: cfg.file.mainStyles, + mainStylesMin: cfg.file.mainStylesMin, + vendorStyles: cfg.file.vendorStyles, + vendorStylesMin: cfg.file.vendorStylesMin, + error: cfg.error, + checkProduction: true, }); /** @@ -100,6 +110,7 @@ */ requireTask(`${cfg.task.lintHtml}`, `./${cfg.folder.tasks}/`, { dest: cfg.buildHtml.dest, + error: cfg.error, }); /** @@ -118,6 +129,7 @@ dest: cfg.folder.build, mainJs: cfg.file.mainJs, mainJsMin: cfg.file.mainJsMin, + error: cfg.error, checkProduction: true, }); @@ -131,6 +143,7 @@ vendorJs: cfg.file.vendorJs, vendorJsMin: cfg.file.vendorJsMin, vendorJsTemp: cfg.file.vendorJsTemp, + error: cfg.error, checkProduction: true, }); @@ -140,9 +153,10 @@ requireTask(`${cfg.task.buildStyles}`, `./${cfg.folder.tasks}/`, { src: cfg.folder.src, dest: cfg.folder.build, - mainScss: cfg.file.mainScss, - mainScssMin: cfg.file.mainScssMin, + mainStyles: cfg.file.mainStyles, + mainStylesMin: cfg.file.mainStylesMin, sortType: cfg.buildStyles.sortType, + error: cfg.error, checkProduction: true, }); @@ -150,9 +164,10 @@ * Build styles custom files listed in the config */ requireTask(`${cfg.task.buildStylesCustom}`, `./${cfg.folder.tasks}/`, { - stylesCustomInfo: cfg.getPathesForStylesCustom(), + stylesCustomInfo: cfg.getFilesForStylesCustom(), dest: cfg.folder.build, sortType: cfg.buildStyles.sortType, + error: cfg.error, checkProduction: true, }); @@ -162,17 +177,21 @@ requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, { src: cfg.folder.src, dest: cfg.folder.build, - vendorScss: cfg.file.vendorScss, - vendorScssMin: cfg.file.vendorScssMin, + vendorStyles: cfg.file.vendorStyles, + vendorStylesMin: cfg.file.vendorStylesMin, + error: cfg.error, checkProduction: true, }); /** - * Minify images + * Copy & minify images */ - requireTask(`${cfg.task.imageMin}`, `./${cfg.folder.tasks}/`, { + requireTask(`${cfg.task.buildImages}`, `./${cfg.folder.tasks}/`, { src: cfg.folder.src, dest: cfg.folder.build, + imageExtensions: cfg.buildImages.imageExtensions, + isImageMin: cfg.buildImages.isImageMin, + checkProduction: true, }); /** @@ -193,17 +212,17 @@ /** * Copy folders to the build folder */ - requireTask(`${cfg.task.copyFolders}`, `./${cfg.folder.tasks}/`, { + requireTask(`${cfg.task.copyFiles}`, `./${cfg.folder.tasks}/`, { dest: cfg.folder.build, - foldersToCopy: cfg.getPathesToCopy(), + filesToCopy: cfg.getFilesToCopy(), }); /** * Copy folders to the production folder */ - requireTask(`${cfg.task.copyFoldersProd}`, `./${cfg.folder.tasks}/`, { + requireTask(`${cfg.task.copyFilesProd}`, `./${cfg.folder.tasks}/`, { dest: cfg.folder.prod, - foldersToCopy: cfg.getPathesToCopyForProduction(), + filesToCopyProd: cfg.getFilesToCopyProd(), }); /** @@ -221,17 +240,20 @@ requireTask(`${cfg.task.watch}`, `./${cfg.folder.tasks}/`, { src: cfg.folder.src, dest: cfg.folder.build, - imageExtensions: cfg.imageExtensions, + filesToCopy: cfg.getFilesToCopy(), browserSync, deleteFile, tasks: { lintJs: cfg.task.lintJs, buildJs: cfg.task.buildJs, + buildJsVendors: cfg.task.buildJsVendors, buildStyles: cfg.task.buildStyles, buildStylesCustom: cfg.task.buildStylesCustom, + buildStylesVendors: cfg.task.buildStylesVendors, buildHtml: cfg.task.buildHtml, lintHtml: cfg.task.lintHtml, - imageMin: cfg.task.imageMin, + buildImages: cfg.task.buildImages, + copyFiles: cfg.task.copyFiles, }, }, false); @@ -256,13 +278,14 @@ cfg.task.buildJsVendors, ), ), - cfg.task.imageMin, - cfg.task.copyFolders, + cfg.task.buildImages, + cfg.task.copyFiles, gulp.parallel( cfg.task.browserSync, cfg.task.watch, ), - )); + ) + ); /** * Creating production folder without unnecessary files @@ -270,7 +293,7 @@ gulp.task('build', gulp.series( gulp.parallel( cfg.task.cleanProd, - cfg.task.cleanBuild + cfg.task.cleanBuild, ), cfg.task.lintJs, gulp.parallel( @@ -288,9 +311,9 @@ cfg.task.buildJsVendors, ), ), - cfg.task.imageMin, - cfg.task.copyFolders, - cfg.task.copyFoldersProd, + cfg.task.buildImages, + cfg.task.copyFiles, + cfg.task.copyFilesProd, ), true); /** diff --git a/package.json b/package.json index c23f4b9..b618c95 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-starter-jc", - "version": "3.0.0", + "version": "3.0.2", "description": "Starter kit for markup projects", "repository": { "type": "git", @@ -37,7 +37,7 @@ "gulp-file-include": "^2.1.1", "gulp-htmlhint": "^3.0.0", "gulp-if": "^3.0.0", - "gulp-imagemin": "^6.2.0", + "gulp-imagemin": "^7.1.0", "gulp-newer": "^1.4.0", "gulp-notify": "^3.2.0", "gulp-postcss": "^8.0.0", @@ -49,7 +49,7 @@ "path": "^0.12.7", "postcss-import": "^12.0.1", "postcss-sort-media-queries": "^1.0.15", - "sass": "^1.24.4", + "sass": "^1.25.0", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0" }, diff --git a/src/html/partials/head/head.html b/src/html/partials/head/head.html index e1e36e9..fba8392 100644 --- a/src/html/partials/head/head.html +++ b/src/html/partials/head/head.html @@ -2,6 +2,6 @@ Web Starter Kit - - - \ No newline at end of file + + + diff --git a/src/html/partials/scripts/common.html b/src/html/partials/scripts/common.html index 942003f..9f65d7a 100644 --- a/src/html/partials/scripts/common.html +++ b/src/html/partials/scripts/common.html @@ -1,2 +1,2 @@ - - \ No newline at end of file + + diff --git a/src/vendor_entries/vendor.js b/src/vendor_entries/vendor.js index 7590301..583a191 100644 --- a/src/vendor_entries/vendor.js +++ b/src/vendor_entries/vendor.js @@ -8,4 +8,4 @@ module.exports = { es6: [ // './node_modules/your-plugin/es6/your-plugin.js', ] -}; \ No newline at end of file +}; diff --git a/tasks/build-html.js b/tasks/build-html.js index c19d1a4..da7aee1 100644 --- a/tasks/build-html.js +++ b/tasks/build-html.js @@ -12,17 +12,20 @@ module.exports = function (options) { prefix: '@@', basepath: `./${options.templates}`, indent: true, + context: { + mainJs: options.isProduction ? options.mainJsMin : options.mainJs, + vendorJs: options.isProduction ? options.vendorJsMin : options.vendorJs, + mainStyles: options.isProduction ? options.mainStylesMin : options.mainStyles, + vendorStyles: options.isProduction ? options.vendorStylesMin : options.vendorStyles, + }, }; - const errorConfig = { - title: 'HTML compiling error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + + options.error.title = 'HTML compiling error'; return () => { return gulp.src(`./${options.templates}/**/*.html`) .pipe(fileInclude(config)) - .on('error', notify.onError(errorConfig)) + .on('error', notify.onError(options.error)) .pipe(gulp.dest(options.dest)); }; }; diff --git a/tasks/build-images.js b/tasks/build-images.js new file mode 100644 index 0000000..38429ef --- /dev/null +++ b/tasks/build-images.js @@ -0,0 +1,30 @@ +/** + * Copy & minify images + */ +'use strict'; + +const gulp = require('gulp'); +const gulpif = require('gulp-if'); +const newer = require('gulp-newer'); +const imagemin = require('gulp-imagemin'); + +module.exports = function (options) { + const runMinify = options.isProduction && options.isImageMin; + const plugins = [ + imagemin.gifsicle({ interlaced: true }), + imagemin.mozjpeg({ quality: 90, progressive: true }), + imagemin.optipng({ optimizationLevel: 5 }), + imagemin.svgo({ + plugins: [ + { removeViewBox: false, }, + ] + }) + ]; + + return () => { + return gulp.src(`./${options.src}/images/**/*`) + .pipe(newer(`./${options.dest}/images`)) + .pipe(gulpif(runMinify, imagemin(plugins))) + .pipe(gulp.dest(`./${options.dest}/images`)); + }; +}; diff --git a/tasks/build-js-vendors.js b/tasks/build-js-vendors.js index 9edace8..ff36856 100644 --- a/tasks/build-js-vendors.js +++ b/tasks/build-js-vendors.js @@ -20,37 +20,34 @@ module.exports = function (options) { const babelConfig = { presets: ['@babel/preset-env'], }; - const errorConfig = { - title: 'JS compiling error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + + options.error.title = 'JS compiling error'; return (done) => { if (noneES5 && noneES6) { return done(); } else if (noneES6) { return gulp.src(filesExist(jsVendors.es5)) - .pipe(concat(options.vendorJsMin)) + .pipe(concat(options.isProduction ? options.vendorJsMin : options.vendorJs)) .pipe(gulpif(options.isProduction, uglify())) .pipe(gulp.dest(`./${options.dest}/js`)); } else if (noneES5) { return browserify({ entries: jsVendors.es6 }) .transform('babelify', babelConfig) - .bundle().on('error', notify.onError(errorConfig)) - .pipe(source(options.vendorJsMin)) + .bundle().on('error', notify.onError(options.error)) + .pipe(source(options.isProduction ? options.vendorJsMin : options.vendorJs)) .pipe(gulpif(options.isProduction, buffer())) .pipe(gulpif(options.isProduction, uglify())) .pipe(gulp.dest(`./${options.dest}/js`)); } else { return browserify({ entries: jsVendors.es6 }) .transform('babelify', babelConfig) - .bundle().on('error', notify.onError(errorConfig)) + .bundle().on('error', notify.onError(options.error)) .pipe(source(options.vendorJsTemp)) .pipe(gulp.dest(`./${options.temp}/js`)) .on('end', () => { gulp.src(filesExist([...jsVendors.es5, `./${options.temp}/js/${options.vendorJsTemp}`])) - .pipe(concat(options.vendorJsMin)) + .pipe(concat(options.isProduction ? options.vendorJsMin : options.vendorJs)) .pipe(gulpif(options.isProduction, uglify())) .pipe(gulp.dest(`./${options.dest}/js`)) }); diff --git a/tasks/build-js.js b/tasks/build-js.js index b480f9b..7e26092 100644 --- a/tasks/build-js.js +++ b/tasks/build-js.js @@ -15,19 +15,16 @@ module.exports = function (options) { const babelConfig = { presets: ['@babel/preset-env'], }; - const errorConfig = { - title: 'JS compiling error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + + options.error.title = 'JS compiling error'; return () => { return browserify({ entries: `./${options.src}/js/${options.mainJs}`, }) .transform('babelify', babelConfig) - .bundle().on('error', notify.onError(errorConfig)) - .pipe(source(options.mainJsMin)) + .bundle().on('error', notify.onError(options.error)) + .pipe(source(options.isProduction ? options.mainJsMin : options.mainJs)) .pipe(gulpif(options.isProduction, buffer())) .pipe(gulpif(options.isProduction, uglify())) .pipe(gulp.dest(`./${options.dest}/js`)); diff --git a/tasks/build-styles-custom.js b/tasks/build-styles-custom.js index 1afaca6..3184838 100644 --- a/tasks/build-styles-custom.js +++ b/tasks/build-styles-custom.js @@ -20,11 +20,8 @@ module.exports = function (options) { const plugins = [ autoprefixer(), ]; - const errorConfig = { - title: 'Sass compiling error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + + options.error.title = 'Sass compiling error'; isGcmq ? plugins.push(gcmq({ sort: options.sortType, })) : false; options.isProduction ? plugins.push(cssnano()) : false; @@ -34,7 +31,7 @@ module.exports = function (options) { return gulp.src(files) .pipe(gulpif(!options.isProduction, sourcemaps.init({ loadMaps: true, }))) .pipe(sass.sync({ sourceMap: !options.isProduction, })) - .on('error', notify.onError(errorConfig)) + .on('error', notify.onError(options.error)) .pipe(postcss(plugins)) .pipe(gulpif(!options.isProduction, sourcemaps.write('./'))) .pipe(gulp.dest(`./${options.dest}/css`)); diff --git a/tasks/build-styles-vendors.js b/tasks/build-styles-vendors.js index 3090feb..b49721d 100644 --- a/tasks/build-styles-vendors.js +++ b/tasks/build-styles-vendors.js @@ -17,19 +17,17 @@ module.exports = function (options) { const plugins = [ cssimport(), ]; - const errorConfig = { - title: 'Sass compiling error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + + options.error.title = 'Sass compiling error'; options.isProduction ? plugins.push(cssnano()) : false; return () => { - return gulp.src(`./${options.src}/vendor_entries/${options.vendorScss}`) - .pipe(rename(options.vendorScssMin)) + return gulp + .src(`./${options.src}/vendor_entries/vendor.scss`) + .pipe(rename(options.isProduction ? options.vendorStylesMin : options.vendorStyles)) .pipe(sass.sync()) - .on('error', notify.onError(errorConfig)) + .on('error', notify.onError(options.error)) .pipe(postcss(plugins)) .pipe(gulp.dest(`./${options.dest}/css`)); }; diff --git a/tasks/build-styles.js b/tasks/build-styles.js index 3c5ce2f..775aad0 100644 --- a/tasks/build-styles.js +++ b/tasks/build-styles.js @@ -20,21 +20,18 @@ module.exports = function (options) { const plugins = [ autoprefixer(), ]; - const errorConfig = { - title: 'Sass compiling error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + + options.error.title = 'Sass compiling error'; options.isProduction ? plugins.push(gcmq({ sort: options.sortType, })) : false; options.isProduction ? plugins.push(cssnano()) : false; return () => { - return gulp.src(`./${options.src}/scss/${options.mainScss}`) - .pipe(rename(options.mainScssMin)) + return gulp.src(`./${options.src}/scss/styles.scss`) + .pipe(rename(options.isProduction ? options.mainStylesMin : options.mainStyles)) .pipe(gulpif(!options.isProduction, sourcemaps.init({ loadMaps: true, }))) .pipe(sass.sync({ sourceMap: !options.isProduction, })) - .on('error', notify.onError(errorConfig)) + .on('error', notify.onError(options.error)) .pipe(postcss(plugins)) .pipe(gulpif(!options.isProduction, sourcemaps.write('./'))) .pipe(gulp.dest(`./${options.dest}/css`)); diff --git a/tasks/clean-build.js b/tasks/clean-build.js index e138dea..1d60170 100644 --- a/tasks/clean-build.js +++ b/tasks/clean-build.js @@ -7,9 +7,7 @@ const del = require('del'); module.exports = function (options) { const dir = [ - `${options.src}/**/*`, - `!${options.src}/images/`, - `!${options.src}/images/**`, + `./${options.src}/`, ]; const config = { force: true, diff --git a/tasks/copy-folders-production.js b/tasks/copy-files-production.js similarity index 76% rename from tasks/copy-folders-production.js rename to tasks/copy-files-production.js index d9c4da8..d355453 100644 --- a/tasks/copy-folders-production.js +++ b/tasks/copy-files-production.js @@ -8,7 +8,7 @@ const gulp = require('gulp'); module.exports = function(options) { return () => { - return gulp.src(options.foldersToCopy, { dot: true }) + return gulp.src(options.filesToCopyProd, { dot: true }) .pipe(gulp.dest(`./${options.dest}`)); }; -}; \ No newline at end of file +}; diff --git a/tasks/copy-folders.js b/tasks/copy-files.js similarity index 58% rename from tasks/copy-folders.js rename to tasks/copy-files.js index 682afcd..1c6ced2 100644 --- a/tasks/copy-folders.js +++ b/tasks/copy-files.js @@ -4,11 +4,13 @@ 'use strict'; const gulp = require('gulp'); +const newer = require('gulp-newer'); module.exports = function(options) { return () => { - return gulp.src(options.foldersToCopy, { dot: true }) + return gulp.src(options.filesToCopy, { dot: true }) + .pipe(newer(`./${options.dest}`)) .pipe(gulp.dest(`./${options.dest}`)); }; -}; \ No newline at end of file +}; diff --git a/tasks/image-min.js b/tasks/image-min.js deleted file mode 100644 index 37c8160..0000000 --- a/tasks/image-min.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * Minify images - */ -'use strict'; - -const gulp = require('gulp'); -const newer = require('gulp-newer'); -const imagemin = require('gulp-imagemin'); - -module.exports = function (options) { - - return () => { - return gulp.src(`./${options.src}/images/**/*`) - .pipe(newer(`./${options.dest}/images/`)) - .pipe(imagemin([ - imagemin.jpegtran({ - progressive: true, - }), - imagemin.optipng({ - optimizationLevel: 5, - }), - imagemin.svgo({ - plugins: [{ - removeViewBox: false, - }] - }) - ])) - .pipe(gulp.dest(`./${options.dest}/images/`)); - }; -}; diff --git a/tasks/lint-html.js b/tasks/lint-html.js index 33e7394..d411320 100644 --- a/tasks/lint-html.js +++ b/tasks/lint-html.js @@ -8,23 +8,19 @@ const notify = require('gulp-notify'); const htmlhint = require('gulp-htmlhint'); module.exports = function (options) { - const errorConfig = { - title: 'HTML linting error', - icon: './sys_icon/error_icon.png', - wait: true, - }; + options.error.title = 'HTML linting error'; return (done) => { gulp.src(`${options.dest}/*.html`) .pipe(htmlhint({ - 'attr-lowercase': ['viewBox'], + 'attr-lowercase': false, })) .pipe(htmlhint.reporter('htmlhint-stylish')) .pipe(htmlhint.failOnError({ suppress: true, })) - .on('error', notify.onError(errorConfig)); + .on('error', notify.onError(options.error)); return done(); }; -}; \ No newline at end of file +}; diff --git a/tasks/watch.js b/tasks/watch.js index 4f6f47c..56ca1fc 100644 --- a/tasks/watch.js +++ b/tasks/watch.js @@ -14,16 +14,31 @@ module.exports = function (options) { gulp.watch(`./${options.src}/html/**/*`, gulp.series(options.tasks.buildHtml, options.tasks.lintHtml)); - gulp.watch(`./${options.src}/images/**/*.+(${options.imageExtensions})`) + gulp.watch(`./${options.src}/vendor_entries/vendor.js`, gulp.series(options.tasks.buildJsVendors)); + + gulp.watch(`./${options.src}/vendor_entries/vendor.scss`, gulp.series(options.tasks.buildStylesVendors)); + + gulp.watch(options.filesToCopy) + .on('unlink', (path) => { + options.deleteFile({ + path, + event: 'unlink' + }, options.src, options.dest); + }) + .on('add', gulp.series(options.tasks.copyFiles)); + + gulp.watch(`${options.src}/images/**/*`) .on('unlink', (path) => { options.deleteFile({ path, event: 'unlink' }, options.src, options.dest); }) - .on('add', gulp.series(options.tasks.imageMin)); + .on('add', gulp.series(options.tasks.buildImages)); gulp.watch([`./${options.dest}/**/*`, `!./${options.dest}/**/*.map`]) - .on('change', options.browserSync.reload); + .on('change', options.browserSync.reload) + .on('unlink', options.browserSync.reload) + .on('add', options.browserSync.reload); }; -}; \ No newline at end of file +};