Added Gulp for CSS/JS Styling
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<head>
|
||||
<!-- <meta> tags> -->
|
||||
<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>
|
||||
|
||||
<body>
|
||||
@@ -12,6 +12,6 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<head>
|
||||
<!-- <meta> tags> -->
|
||||
<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>
|
||||
|
||||
<body>
|
||||
@@ -9,5 +10,6 @@
|
||||
{{> src/template }}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
|
||||
<script src="scripts/template.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Generated
+8519
-5
File diff suppressed because it is too large
Load Diff
+11
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "axe-web-component",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"scripts": {
|
||||
"start": "NODE_ENV=production node server.js",
|
||||
"dev": "NODE_ENV=development node server.js"
|
||||
@@ -13,9 +13,18 @@
|
||||
"config": "^3.3.7",
|
||||
"express": "^4.17.3",
|
||||
"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": {
|
||||
"component-dev": "./server.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp-babel": "^8.0.0",
|
||||
"gulp-sass": "^5.1.0",
|
||||
"gulp-uglify": "^3.0.2",
|
||||
"sass": "^1.50.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,13 @@ import {create} from 'express-handlebars';
|
||||
import fs from 'fs-extra';
|
||||
import browserSync from 'browser-sync';
|
||||
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
|
||||
@@ -12,7 +19,9 @@ import config from 'config';
|
||||
|
||||
const isDev = config.get('mode') === 'development';
|
||||
const projectDir = isDev ? '.' : './node_modules/axe-web-component';
|
||||
console.log(isDev);
|
||||
console.log('Development Mode:', isDev);
|
||||
|
||||
const sass = gulpSass(dartSass);
|
||||
|
||||
/**
|
||||
* Init server
|
||||
@@ -45,28 +54,26 @@ const listener = app.listen(0, () => {
|
||||
|
||||
const bs = browserSync.create();
|
||||
|
||||
bs.watch("src/**/*.js", function (event, file) {
|
||||
if (isDev) {
|
||||
console.log(event, file);
|
||||
}
|
||||
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'],
|
||||
{delay: 400},
|
||||
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) {
|
||||
if (isDev) {
|
||||
console.log(event, file);
|
||||
}
|
||||
|
||||
bs.reload();
|
||||
browserSyncReload(bs, '', 'Template File Change: ' + file)
|
||||
});
|
||||
|
||||
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:
|
||||
//
|
||||
// Add Gulp for CSS/JS Styling
|
||||
// [v] Add Gulp for CSS/JS Styling
|
||||
// [v] Add Browsersync that will refresh the page on changes
|
||||
//
|
||||
// Breakpoints and data options will come from backend server.
|
||||
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
!function(o){console.log("Ready!",o)}(window.jQuery);
|
||||
//# sourceMappingURL=template.min.js.map
|
||||
@@ -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);"]}
|
||||
@@ -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"}
|
||||
+1
-2
@@ -10,5 +10,4 @@
|
||||
.clients {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=template.css.map */
|
||||
/*# sourceMappingURL=template.min.css.map */
|
||||
@@ -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}"]}
|
||||
@@ -10,6 +10,7 @@
|
||||
|
||||
.clients {
|
||||
background-color: red;
|
||||
//color: white;
|
||||
|
||||
&__sub_level {
|
||||
// EXAMPLE OF BREAKPOINTS
|
||||
|
||||
Reference in New Issue
Block a user