From b31f5b9725910022433f98c698a1848488749551 Mon Sep 17 00:00:00 2001 From: Stanislav Gurin Date: Mon, 27 Jan 2020 15:27:49 +0200 Subject: [PATCH 1/3] Update links to the repo in package.json --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index bcf614a..58d8dfe 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { "name": "web-starter-jc", - "version": "3.0.1", + "version": "3.0.2", "description": "Starter kit for markup projects", "repository": { "type": "git", - "url": "git+https://github.com/justcoded/web-starter-kit" + "url": "git+https://github.com/justcoded/web-starter-kit-wp" }, "keywords": [ "starter", @@ -16,9 +16,9 @@ "author": "JustCoded", "license": "MIT", "bugs": { - "url": "https://github.com/justcoded/web-starter-kit/issues" + "url": "https://github.com/justcoded/web-starter-kit-wp/issues" }, - "homepage": "https://github.com/justcoded/web-starter-kit", + "homepage": "https://github.com/justcoded/web-starter-kit-wp", "devDependencies": { "@babel/core": "^7.8.0", "@babel/preset-env": "^7.8.0", From ba112673334a9fee39b1f017ae173a6678763e5f Mon Sep 17 00:00:00 2001 From: dsymonov Date: Tue, 4 Feb 2020 17:52:51 +0200 Subject: [PATCH 2/3] Watcher, webRoot & file names - update --- README.md | 28 +++++++++++++++++++--------- gulp-config.js | 10 +++++++--- gulpfile.js | 20 +++++++++++++++++--- html/partials/head/head.html | 6 +++--- html/partials/scripts/common.html | 4 ++-- package.json | 2 +- tasks/build-html.js | 16 ++++++++++------ tasks/build-js-vendors.js | 13 +++++-------- tasks/build-js.js | 9 +++------ tasks/build-styles-custom.js | 9 +++------ tasks/build-styles-vendors.js | 11 ++++------- tasks/build-styles.js | 11 ++++------- tasks/clean-build.js | 2 +- tasks/lint-html.js | 12 ++++-------- tasks/watch.js | 4 ++++ vendor_entries/vendor.js | 2 +- 16 files changed, 88 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 3a7cf3d..3622317 100644 --- a/README.md +++ b/README.md @@ -16,10 +16,11 @@ Web Starter Kit (WSK) - is an opinionated boilerplate for web development. Tools 4. [Templating](#templating) 5. [Styles](#styles) 6. [JavaScript](#javascript) -7. [Tasks](#tasks) -8. [Troubleshooting](#troubleshooting) -9. [Contributing](#contributing) -10. [License](#license) +7. [Watching](#watching) +8. [Tasks](#tasks) +9. [Troubleshooting](#troubleshooting) +10. [Contributing](#contributing) +11. [License](#license) ## Install @@ -32,7 +33,9 @@ Instruction for installation WSK please read in `master` branch [README.md](http 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 @@ -42,14 +45,16 @@ This includes linting as well as script, stylesheet and HTML compiling. 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 ``` Command for building current project, ready for WordPress. -This includes linting as well as script, stylesheet and HTML compiling. +This includes linting as well as script, stylesheet (group & sort CSS media queries) and HTML compiling. ### Linter - only for JS @@ -116,7 +121,7 @@ If you want to use our WSK, you need to know something about the structure. ├── css #Folder with compiled styles ├── js #Folder with compiled js ├── custom-folder #Folder with your sources, witch are not compiling (like - images, fonts, videos, audios) - └── index.html #Compiled html file + └── index.html #Compiled html file ``` @@ -148,7 +153,7 @@ 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 `assets/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) @@ -184,6 +189,11 @@ In our WSK we use **CSS3 custom properties** and **relative units** `rem`. By de 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. + ## Tasks |Task | Description | diff --git a/gulp-config.js b/gulp-config.js index 8fa914a..aa9cb39 100644 --- a/gulp-config.js +++ b/gulp-config.js @@ -10,8 +10,8 @@ module.exports = { publicJs: 'jquery.main.js', vendorJs: 'vendor.js', vendorJsTemp: 'vendor.temp.js', - mainScss: 'styles.scss', - vendorScss: 'vendor.scss', + mainStyles: 'styles.css', + vendorStyles: 'vendor.css', }, buildHtml: { templates: 'html/templates', @@ -34,7 +34,11 @@ module.exports = { browserSync: 'browser-sync-server', watch: 'watch', }, - getPathesForStylesCustom: function () { + error: { + icon: './sys_icon/error_icon.png', + wait: true, + }, + getFilesForStylesCustom: function () { return { files: [], isGcmq: false, diff --git a/gulpfile.js b/gulpfile.js index 8954059..bf958de 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -69,6 +69,12 @@ requireTask(`${cfg.task.buildHtml}`, `./${cfg.folder.tasks}/`, { templates: cfg.buildHtml.templates, dest: cfg.buildHtml.dest, + mainJs: cfg.file.mainJs, + publicJs: cfg.file.publicJs, + vendorJs: cfg.file.vendorJs, + mainStyles: cfg.file.mainStyles, + vendorStyles: cfg.file.vendorStyles, + error: cfg.error, }); /** @@ -76,6 +82,7 @@ */ requireTask(`${cfg.task.lintHtml}`, `./${cfg.folder.tasks}/`, { dir: cfg.folder.build, + error: cfg.error, }); /** @@ -92,6 +99,7 @@ dest: cfg.folder.build, mainJs: cfg.file.mainJs, publicJs: cfg.file.publicJs, + error: cfg.error, }); /** @@ -102,6 +110,7 @@ temp: cfg.folder.temp, vendorJs: cfg.file.vendorJs, vendorJsTemp: cfg.file.vendorJsTemp, + error: cfg.error, }); /** @@ -109,7 +118,8 @@ */ requireTask(`${cfg.task.buildStyles}`, `./${cfg.folder.tasks}/`, { dest: cfg.folder.build, - mainScss: cfg.file.mainScss, + mainStyles: cfg.file.mainStyles, + error: cfg.error, checkProduction: true, }); @@ -117,9 +127,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, }); @@ -128,7 +139,8 @@ */ requireTask(`${cfg.task.buildStylesVendors}`, `./${cfg.folder.tasks}/`, { dest: cfg.folder.build, - vendorScss: cfg.file.vendorScss, + vendorStyles: cfg.file.vendorStyles, + error: cfg.error, }); /** @@ -156,8 +168,10 @@ 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, }, diff --git a/html/partials/head/head.html b/html/partials/head/head.html index 093515c..fba8392 100644 --- a/html/partials/head/head.html +++ b/html/partials/head/head.html @@ -2,6 +2,6 @@ Web Starter Kit - - - \ No newline at end of file + + + diff --git a/html/partials/scripts/common.html b/html/partials/scripts/common.html index 8c73001..894b56b 100644 --- a/html/partials/scripts/common.html +++ b/html/partials/scripts/common.html @@ -2,5 +2,5 @@ src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"> - - \ No newline at end of file + + diff --git a/package.json b/package.json index 58d8dfe..d435338 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,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-source-stream": "^2.0.0" }, "engines": { diff --git a/tasks/build-html.js b/tasks/build-html.js index d9ef5c1..dede861 100644 --- a/tasks/build-html.js +++ b/tasks/build-html.js @@ -12,17 +12,21 @@ module.exports = function (options) { prefix: '@@', basepath: `./${options.templates}`, indent: true, + context: { + mainJs: options.mainJs, + publicJs: options.publicJs, + vendorJs: options.vendorJs, + mainStyles: options.mainStyles, + vendorStyles: 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-js-vendors.js b/tasks/build-js-vendors.js index fd61de6..f86d141 100644 --- a/tasks/build-js-vendors.js +++ b/tasks/build-js-vendors.js @@ -17,11 +17,8 @@ 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) { @@ -33,13 +30,13 @@ module.exports = function (options) { } else if (noneES5) { return browserify({ entries: jsVendors.es6 }) .transform('babelify', babelConfig) - .bundle().on('error', notify.onError(errorConfig)) + .bundle().on('error', notify.onError(options.error)) .pipe(source(options.vendorJs)) .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', () => { @@ -49,4 +46,4 @@ module.exports = function (options) { }); } }; -}; \ No newline at end of file +}; diff --git a/tasks/build-js.js b/tasks/build-js.js index c95ae6f..1061d40 100644 --- a/tasks/build-js.js +++ b/tasks/build-js.js @@ -12,18 +12,15 @@ 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: `./js/${options.mainJs}`, }) .transform('babelify', babelConfig) - .bundle().on('error', notify.onError(errorConfig)) + .bundle().on('error', notify.onError(options.error)) .pipe(source(options.publicJs)) .pipe(gulp.dest(`../${options.dest}/js`)); }; diff --git a/tasks/build-styles-custom.js b/tasks/build-styles-custom.js index 0d7d8e6..4f0197b 100644 --- a/tasks/build-styles-custom.js +++ b/tasks/build-styles-custom.js @@ -19,11 +19,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; @@ -32,7 +29,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 6955051..7167728 100644 --- a/tasks/build-styles-vendors.js +++ b/tasks/build-styles-vendors.js @@ -15,16 +15,13 @@ 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'; return () => { - return gulp.src(`./vendor_entries/${options.vendorScss}`) + return gulp.src(`./vendor_entries/vendor.scss`) .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 a4c0bb8..6f4759c 100644 --- a/tasks/build-styles.js +++ b/tasks/build-styles.js @@ -18,19 +18,16 @@ 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; return () => { - return gulp.src(`./scss/${options.mainScss}`) + return gulp.src(`./scss/styles.scss`) .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 294d6c2..b1b647f 100644 --- a/tasks/clean-build.js +++ b/tasks/clean-build.js @@ -9,7 +9,7 @@ module.exports = function (options) { return async () => { const deletedPaths = await del([ - `../${options.dir}/*.html`, + `../${options.dir}/**/*.html`, `../${options.dir}/css`, `../${options.dir}/js`, ], { force: true }); diff --git a/tasks/lint-html.js b/tasks/lint-html.js index caa0260..2fb9f84 100644 --- a/tasks/lint-html.js +++ b/tasks/lint-html.js @@ -8,22 +8,18 @@ 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.dir}/*.html`) + gulp.src(`../${options.dir}/**/*.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(); }; diff --git a/tasks/watch.js b/tasks/watch.js index fd53084..4f1e1fa 100644 --- a/tasks/watch.js +++ b/tasks/watch.js @@ -14,6 +14,10 @@ module.exports = function (options) { gulp.watch(`html/**/*`, gulp.series(options.tasks.buildHtml, options.tasks.lintHtml)); + gulp.watch(`vendor_entries/vendor.js`, gulp.series(options.tasks.buildJsVendors)); + + gulp.watch(`vendor_entries/vendor.scss`, gulp.series(options.tasks.buildStylesVendors)); + gulp.watch([`../${options.dir}/**/*`, `!../${options.dir}/css/*.map`]) .on('change', options.browserSync.reload); }; diff --git a/vendor_entries/vendor.js b/vendor_entries/vendor.js index 8ef4481..55529a7 100644 --- a/vendor_entries/vendor.js +++ b/vendor_entries/vendor.js @@ -9,4 +9,4 @@ module.exports = { es6: [ // './node_modules/your-plugin/es6/your-plugin.js', ] -}; \ No newline at end of file +}; From e897d51fd14b154f323582677fb1e363c643908d Mon Sep 17 00:00:00 2001 From: dsymonov Date: Tue, 4 Feb 2020 18:02:55 +0200 Subject: [PATCH 3/3] Readme update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3622317..0bfaa94 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,7 @@ If you want to use our WSK, you need to know something about the structure. ├── css #Folder with compiled styles ├── js #Folder with compiled js ├── custom-folder #Folder with your sources, witch are not compiling (like - images, fonts, videos, audios) - └── index.html #Compiled html file + └── index.html #Compiled html file ```