axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Gulp for CSS/JS Styling

Browse Source
This commit is contained in:
Roman Axelrod
2022-04-19 13:17:00 +03:00
parent a02248e2ea
commit ff916406da
13 changed files with 8605 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gulpfile.js
View File
layouts/page-container.hbs
+2 -2
View File
@@ -2,7 +2,7 @@
<head> <head>
<!-- <meta> tags> --> <!-- <meta> tags> -->
<link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css"> <link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
<link rel="stylesheet" href="styles/template.css"> <link rel="stylesheet" href="styles/template.min.css">
</head> </head>
<body> <body>
@@ -12,6 +12,6 @@
</div> </div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="scripts/template.js"></script> <script src="scripts/template.min.js"></script>
</body> </body>
</html> </html>
layouts/page.hbs
+2
View File
@@ -2,6 +2,7 @@
<head> <head>
<!-- <meta> tags> --> <!-- <meta> tags> -->
<link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css"> <link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
<link rel="stylesheet" href="styles/template.min.css">
</head> </head>
<body> <body>
@@ -9,5 +10,6 @@
{{> src/template }} {{> src/template }}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="scripts/template.min.js"></script>
</body> </body>
</html> </html>
package-lock.json
Generated
+8519 -5
View File
File diff suppressed because it is too large Load Diff
package.json
+11 -2
View File
@@ -1,6 +1,6 @@
{ {
"name": "axe-web-component", "name": "axe-web-component",
"version": "1.0.0", "version": "1.0.1",
"scripts": { "scripts": {
"start": "NODE_ENV=production node server.js", "start": "NODE_ENV=production node server.js",
"dev": "NODE_ENV=development node server.js" "dev": "NODE_ENV=development node server.js"
@@ -13,9 +13,18 @@
"config": "^3.3.7", "config": "^3.3.7",
"express": "^4.17.3", "express": "^4.17.3",
"express-handlebars": "^6.0.4", "express-handlebars": "^6.0.4",
"fs-extra": "^10.0.1" "fs-extra": "^10.0.1",
"gulp": "^4.0.2",
"gulp-rename": "^2.0.0",
"gulp-sourcemaps": "^3.0.0"
}, },
"bin": { "bin": {
"component-dev": "./server.js" "component-dev": "./server.js"
},
"devDependencies": {
"gulp-babel": "^8.0.0",
"gulp-sass": "^5.1.0",
"gulp-uglify": "^3.0.2",
"sass": "^1.50.1"
} }
} }
server.js
+65 -19
View File
@@ -5,6 +5,13 @@ import {create} from 'express-handlebars';
import fs from 'fs-extra'; import fs from 'fs-extra';
import browserSync from 'browser-sync'; import browserSync from 'browser-sync';
import config from 'config'; import config from 'config';
import gulp from 'gulp';
import babel from "gulp-babel";
import uglify from "gulp-uglify";
import rename from "gulp-rename";
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import sourcemaps from "gulp-sourcemaps";
/** /**
* Constants * Constants
@@ -12,7 +19,9 @@ import config from 'config';
const isDev = config.get('mode') === 'development'; const isDev = config.get('mode') === 'development';
const projectDir = isDev ? '.' : './node_modules/axe-web-component'; const projectDir = isDev ? '.' : './node_modules/axe-web-component';
console.log(isDev); console.log('Development Mode:', isDev);
const sass = gulpSass(dartSass);
/** /**
* Init server * Init server
@@ -45,28 +54,26 @@ const listener = app.listen(0, () => {
const bs = browserSync.create(); const bs = browserSync.create();
bs.watch("src/**/*.js", function (event, file) { gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'],
if (isDev) { {delay: 400},
console.log(event, file); gulp.series([buildScriptFiles, function (cb) {
} browserSyncReload(bs, 'js', 'Script Files Change');
return cb();
}]));
bs.reload("*.js"); gulp.watch('src/**/*.scss',
}); {delay: 400},
gulp.series([buildStyleFiles, function (cb) {
browserSyncReload(bs, 'css', 'Style Files Change');
return cb();
}]));
bs.watch("src/**/*.css", function (event, file) {
if (isDev) {
console.log(event, file);
}
bs.reload("*.css"); // bs.watch("src/**/*.js", function (event, file) {});
}); // bs.watch("src/**/*.css", function (event, file) {});
bs.watch("src/**/*.hbs", function (event, file) { bs.watch("src/**/*.hbs", function (event, file) {
if (isDev) { browserSyncReload(bs, '', 'Template File Change: ' + file)
console.log(event, file);
}
bs.reload();
}); });
bs.init({ bs.init({
@@ -74,9 +81,48 @@ const listener = app.listen(0, () => {
}); });
}); });
/**
* Functions
*/
function browserSyncReload(bs, extension = '', message = '') {
if (isDev) {
// console.log(event, file);
console.log(message);
}
if (extension) {
extension = "*." + extension;
}
bs.reload(extension);
}
function buildScriptFiles() {
return gulp.src(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'])
.pipe(sourcemaps.init({}))
.pipe(babel())
.pipe(gulp.src('vendor/*.js'))
// .pipe(gulp.dest('src/'))
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('src/'));
}
function buildStyleFiles() {
return gulp.src('src/**/*.scss')
.pipe(sourcemaps.init({}))
.pipe(sass.sync().on('error', sass.logError))
// .pipe(gulp.dest('src/'))
.pipe(rename({extname: '.min.css'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('src/'))
}
// TODO: // TODO:
// //
// Add Gulp for CSS/JS Styling // [v] Add Gulp for CSS/JS Styling
// [v] Add Browsersync that will refresh the page on changes // [v] Add Browsersync that will refresh the page on changes
// //
// Breakpoints and data options will come from backend server. // Breakpoints and data options will come from backend server.
src/scripts/template.min.js
Vendored
+2
View File
@@ -0,0 +1,2 @@
!function(o){console.log("Ready!",o)}(window.jQuery);
//# sourceMappingURL=template.min.js.map
src/scripts/template.min.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,SAAUF,GAF1B,CAIGG,OAAOC","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!', $);\n\n})(window.jQuery);"]}
src/scripts/template.js → src/scripts/template.mjs
View File
src/styles/template.css.map
-1
View File
@@ -1 +0,0 @@
{"version":3,"sourceRoot":"","sources":["template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.css"}
src/styles/template.css → src/styles/template.min.css
Vendored
+1 -2
View File
@@ -10,5 +10,4 @@
.clients { .clients {
background-color: red; background-color: red;
} }
/*# sourceMappingURL=template.min.css.map */
/*# sourceMappingURL=template.css.map */
src/styles/template.min.css.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n * No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n *\n */\n\n.clients {\n background-color: red;\n //color: white;\n\n &__sub_level {\n // EXAMPLE OF BREAKPOINTS\n\n @media (min-width: 600px) {\n // Tablet\n }\n\n @media (min-width: 980px) {\n // Large Tablet\n }\n\n @media (min-width: 1024px) {\n // Laptop & Tablet\n }\n\n @media (min-width: 1336px) {\n // Laptop\n }\n\n @media (min-width: 1680px) {\n // Desktop\n }\n\n }\n\n &__sub_level_two {\n //\n }\n}"]}
src/styles/template.scss
+1
View File
@@ -10,6 +10,7 @@
.clients { .clients {
background-color: red; background-color: red;
//color: white;
&__sub_level { &__sub_level {
// EXAMPLE OF BREAKPOINTS // EXAMPLE OF BREAKPOINTS