AXE-WEB
/
block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Added Gulp for CSS/JS Styling

pull/1/head
Roman Axelrod 4 years ago
parent
a02248e2ea
commit
ff916406da
13 changed files with 9412 additions and 838 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 0
      gulpfile.js
  2. 4
      layouts/page-container.hbs
  3. 2
      layouts/page.hbs
  4. 11434
      package-lock.json
  5. 13
      package.json
  6. 84
      server.js
  7. 2
      src/scripts/template.min.js
  8. 1
      src/scripts/template.min.js.map
  9. 0
      src/scripts/template.mjs
  10. 1
      src/styles/template.css.map
  11. 3
      src/styles/template.min.css
  12. 1
      src/styles/template.min.css.map
  13. 1
      src/styles/template.scss

0
gulpfile.js
View File

4
layouts/page-container.hbs
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>

2
layouts/page.hbs
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>

11434
package-lock.json
View File

File diff suppressed because it is too large

13
package.json
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"
} }
} }

84
server.js
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.

2
src/scripts/template.min.js
View File

@ -0,0 +1,2 @@
!function(o){console.log("Ready!",o)}(window.jQuery);
//# sourceMappingURL=template.min.js.map

1
src/scripts/template.min.js.map
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);"]}

0
src/scripts/template.js → src/scripts/template.mjs
View File

1
src/styles/template.css.map
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"}

3
src/styles/template.css → src/styles/template.min.css
View File

@ -10,5 +10,4 @@
.clients { .clients {
background-color: red; background-color: red;
} }
/*# sourceMappingURL=template.min.css.map */
/*# sourceMappingURL=template.css.map */

1
src/styles/template.min.css.map
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}"]}

1
src/styles/template.scss
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

Write Preview
Loading…
Cancel
Save