Skip to content

Commit 453081e

Browse files
stafyniaksachastafyniaksacha
committed
feat: use node modules (instead of commonjs) + update packages dependencies
1 parent 9fbbc6c commit 453081e

File tree

4 files changed

+18048
-4319
lines changed

4 files changed

+18048
-4319
lines changed

‎config.js

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
module.exports = {
2-
config: {
3-
port: 9050
4-
},
5-
paths: {
6-
root: "./",
7-
src: {
8-
base: "./src",
9-
css: "./src/css",
10-
js: "./src/js",
11-
img: "./src/img"
12-
},
13-
dist: {
14-
base: "./dist",
15-
css: "./dist/css",
16-
js: "./dist/js",
17-
img: "./dist/img"
18-
},
19-
build: {
20-
base: "./build",
21-
css: "./build/css",
22-
js: "./build/js",
23-
img: "./build/img"
24-
}
25-
}
26-
}
1+
export default {
2+
config: {
3+
port: 9050,
4+
},
5+
paths: {
6+
root: "./",
7+
src: {
8+
base: "./src",
9+
css: "./src/css",
10+
js: "./src/js",
11+
img: "./src/img",
12+
},
13+
dist: {
14+
base: "./dist",
15+
css: "./dist/css",
16+
js: "./dist/js",
17+
img: "./dist/img",
18+
},
19+
build: {
20+
base: "./build",
21+
css: "./build/css",
22+
js: "./build/js",
23+
img: "./build/img",
24+
},
25+
},
26+
};

‎gulpfile.js

Lines changed: 122 additions & 141 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,138 @@
1-
const { src, dest, task, watch, series, parallel } = require('gulp');
2-
const del = require('del');
3-
const options = require("./config");
4-
const browserSync = require('browser-sync').create();
5-
6-
const sass = require('gulp-sass');
7-
const bourbon = require('node-bourbon').includePaths;
8-
const postcss = require('gulp-postcss');
9-
const concat = require('gulp-concat');
10-
const uglify = require('gulp-uglify');
11-
const imagemin = require('gulp-imagemin');
12-
const cleanCSS = require('gulp-clean-css');
13-
const purgecss = require('gulp-purgecss');
14-
const sourcemaps = require('gulp-sourcemaps');
15-
const autoprefixer = require('gulp-autoprefixer');
16-
const panini = require('panini');
17-
18-
const browserify = require("browserify");
19-
const babelify = require("babelify");
20-
const source = require("vinyl-source-stream");
21-
const nodepath = 'node_modules/';
22-
23-
sass.compiler = require('sass');
24-
25-
//Note : Webp still not supported in major browsers including forefox
26-
//const webp = require('gulp-webp'); //For converting images to WebP format
27-
//const replace = require('gulp-replace'); //For Replacing img formats to webp in html
28-
const logSymbols = require('log-symbols'); //For Symbolic Console logs :) :P
1+
import gulp from "gulp";
2+
3+
import gulpSass from "gulp-sass";
4+
import concat from "gulp-concat";
5+
import imagemin from "gulp-imagemin";
6+
import purgecss from "gulp-purgecss";
7+
import sourcemaps from "gulp-sourcemaps";
8+
import autoprefixer from "gulp-autoprefixer";
9+
import panini from "panini";
10+
11+
import sassCompiler from "sass";
12+
import del from "del";
13+
import browserify from "browserify";
14+
import babelify from "babelify";
15+
import source from "vinyl-source-stream";
16+
import logSymbols from "log-symbols";
17+
import BrowserSync from "browser-sync";
18+
19+
import options from "./config.js";
20+
21+
const { src, dest, watch, series, parallel } = gulp;
22+
const browserSync = BrowserSync.create();
23+
const nodepath = "node_modules/";
24+
const sass = gulpSass(sassCompiler);
2925

3026
//Load Previews on Browser on dev
3127
function livePreview(done) {
3228
browserSync.init({
3329
server: {
34-
baseDir: options.paths.dist.base
30+
baseDir: options.paths.dist.base,
3531
},
36-
port: options.config.port || 5000
32+
port: options.config.port || 5000,
3733
});
3834
done();
3935
}
4036

41-
//Copy latest installed Bulma
42-
function setupBulma() {
43-
console.log("\n\t" + logSymbols.info, "Installing Bulma Files..\n");
44-
return src([nodepath + 'bulma/*.sass', nodepath + 'bulma/**/*.sass'])
45-
.pipe(dest('src/sass/'));
46-
}
47-
48-
//Compile Sass code
49-
function compileSASS() {
50-
console.log("\n\t" + logSymbols.info, "Compiling Bulma Sass..\n");
51-
return src(['src/sass/bulma.sass'])
52-
.pipe(sass({
53-
outputStyle: 'compressed',
54-
sourceComments: 'map',
55-
sourceMap: 'sass',
56-
includePaths: bourbon
57-
}).on('error', sass.logError))
58-
.pipe(autoprefixer('last 2 versions'))
59-
.pipe(dest('dist/assets/css'))
60-
.pipe(browserSync.stream());
61-
}
62-
6337
//Compile Scss code
6438
function compileSCSS() {
65-
console.log("\n\t" + logSymbols.info, "Compiling App SCSS..\n");
66-
return src(['src/scss/main.scss'])
67-
.pipe(sass({
68-
outputStyle: 'compressed',
69-
sourceComments: 'map',
70-
sourceMap: 'scss',
71-
includePaths: bourbon
72-
}).on('error', sass.logError))
73-
.pipe(autoprefixer('last 2 versions'))
74-
.pipe(dest('dist/css'))
39+
console.log(logSymbols.info, "Compiling App SCSS..");
40+
return src(["src/scss/main.scss"])
41+
.pipe(
42+
sass({
43+
outputStyle: "compressed",
44+
sourceComments: "map",
45+
sourceMap: "scss",
46+
// includePaths: bourbon,
47+
}).on("error", sass.logError)
48+
)
49+
.pipe(
50+
purgecss({
51+
content: [`${options.paths.src.base}/**/*.html`],
52+
})
53+
)
54+
.pipe(autoprefixer("last 2 versions"))
55+
.pipe(dest("dist/css"))
7556
.pipe(browserSync.stream());
7657
}
7758

7859
//Compile HTML partials with Panini
7960
function compileHTML() {
80-
console.log("\n\t" + logSymbols.info, "Compiling HTML..\n");
61+
console.log(logSymbols.info, "Compiling HTML..");
8162
panini.refresh();
82-
return src('src/pages/**/*.html')
83-
.pipe(panini({
84-
root: 'src/pages/',
85-
layouts: 'src/layouts/',
86-
partials: 'src/partials/',
87-
helpers: 'src/helpers/',
88-
data: 'src/data/'
89-
}))
90-
.pipe(dest('dist'))
63+
return src("src/pages/**/*.html")
64+
.pipe(
65+
panini({
66+
root: "src/pages/",
67+
layouts: "src/layouts/",
68+
partials: "src/partials/",
69+
helpers: "src/helpers/",
70+
data: "src/data/",
71+
})
72+
)
73+
.pipe(dest("dist"))
9174
.pipe(browserSync.stream());
9275
}
9376

9477
//Concat JS
9578
function concatJs() {
96-
console.log("\n\t" + logSymbols.info, "Compiling Vendor Js..\n");
97-
return src([
98-
'src/vendor/js/*',
99-
])
79+
console.log(logSymbols.info, "Compiling Vendor Js..");
80+
return src(["src/vendor/js/*"])
10081
.pipe(sourcemaps.init())
101-
.pipe(concat('app.js'))
102-
.pipe(sourcemaps.write('./'))
103-
.pipe(dest('dist/js'))
82+
.pipe(concat("app.js"))
83+
.pipe(sourcemaps.write("./"))
84+
.pipe(dest("dist/js"))
10485
.pipe(browserSync.stream());
10586
}
10687

10788
//Concat CSS Plugins
10889
function concatCssPlugins() {
109-
console.log("\n\t" + logSymbols.info, "Compiling Plugin styles..\n");
90+
console.log(logSymbols.info, "Compiling Plugin styles..");
11091
return src([
111-
nodepath + 'simplebar/dist/simplebar.min.css',
112-
nodepath + 'plyr/dist/plyr.css',
113-
nodepath + 'codemirror/lib/codemirror.css',
114-
nodepath + 'codemirror/theme/shadowfox.css',
115-
'src/vendor/css/*',
92+
nodepath + "simplebar/dist/simplebar.min.css",
93+
nodepath + "plyr/dist/plyr.css",
94+
nodepath + "codemirror/lib/codemirror.css",
95+
nodepath + "codemirror/theme/shadowfox.css",
96+
"src/vendor/css/*",
11697
])
11798
.pipe(sourcemaps.init())
118-
.pipe(concat('app.css'))
119-
.pipe(sourcemaps.write('./'))
120-
.pipe(dest('dist/css'))
99+
.pipe(concat("app.css"))
100+
.pipe(
101+
purgecss({
102+
content: [`${options.paths.src.base}/**/*.html`],
103+
})
104+
)
105+
.pipe(sourcemaps.write("./"))
106+
.pipe(dest("dist/css"))
121107
.pipe(browserSync.stream());
122108
}
123109

124110
//Reset Panini Cache
125111
function resetPages(done) {
126-
console.log("\n\t" + logSymbols.info, "Clearing Panini Cache..\n");
112+
console.log(logSymbols.info, "Clearing Panini Cache..");
127113
panini.refresh();
128114
done();
129115
}
130116

131117
//Triggers Browser reload
132118
function previewReload(done) {
133-
console.log("\n\t" + logSymbols.info, "Reloading Browser Preview.\n");
119+
console.log(logSymbols.info, "Reloading Browser Preview.");
134120
browserSync.reload();
135121
done();
136122
}
137123

138-
//Development Tasks
139-
function devHTML() {
140-
return src(`${options.paths.src.base}/**/*.html`).pipe(dest(options.paths.dist.base));
124+
//Copy images
125+
function copyImages() {
126+
return src(`${options.paths.src.img}/**/*`).pipe(
127+
dest(options.paths.dist.img)
128+
);
141129
}
142130

143131
//Optimize images
144-
function devImages() {
145-
return src(`${options.paths.src.img}/**/*`).pipe(dest(options.paths.dist.img));
132+
function optimizeImages() {
133+
return src(`${options.paths.src.img}/**/*`)
134+
.pipe(imagemin())
135+
.pipe(dest(options.paths.dist.img));
146136
}
147137

148138
// Let's write our task in a function to keep things clean
@@ -152,7 +142,7 @@ function javascriptBuild() {
152142
browserify({
153143
entries: [`${options.paths.src.js}/main.js`],
154144
// Pass babelify as a transform and set its preset to @babel/preset-env
155-
transform: [babelify.configure({ presets: ["@babel/preset-env"] })]
145+
transform: [babelify.configure({ presets: ["@babel/preset-env"] })],
156146
})
157147
// Bundle it all up!
158148
.bundle()
@@ -164,64 +154,55 @@ function javascriptBuild() {
164154
}
165155

166156
function copyFonts() {
167-
console.log("\n\t" + logSymbols.info, "Copying fonts to dist folder.\n");
168-
return src([
169-
'src/fonts/*',
170-
])
171-
.pipe(dest('dist/fonts'))
172-
.pipe(browserSync.stream());
173-
}
174-
175-
176-
//Copy data files
177-
function copyData() {
178-
console.log("\n\t" + logSymbols.info, "Copying data files..\n");
179-
return src([
180-
'src/data/**/*',
181-
])
182-
.pipe(dest('dist/data'))
157+
console.log(logSymbols.info, "Copying fonts to dist folder.");
158+
return src(["src/fonts/*"])
159+
.pipe(dest("dist/fonts"))
183160
.pipe(browserSync.stream());
184161
}
185162

186163
function watchFiles() {
187-
//watch('src/**/*.html', compileHTML);
188-
watch(`${options.paths.src.base}/**/*.html`, series(compileHTML, previewReload));
189-
watch(['src/scss/**/*', 'src/scss/*'], compileSCSS);
190-
watch(`${options.paths.src.js}/**/*.js`, series(javascriptBuild, previewReload));
191-
watch(`${options.paths.src.img}/**/*`, series(devImages, previewReload));
192-
console.log("\n\t" + logSymbols.info, "Watching for Changes..\n");
164+
watch(
165+
`${options.paths.src.base}/**/*.html`,
166+
series(compileHTML, previewReload)
167+
);
168+
watch(["src/scss/**/*", "src/scss/*"], compileSCSS);
169+
watch(
170+
`${options.paths.src.js}/**/*.js`,
171+
series(javascriptBuild, previewReload)
172+
);
173+
watch(`${options.paths.src.img}/**/*`, series(copyImages, previewReload));
174+
console.log(logSymbols.info, "Watching for Changes..");
193175
}
194176

195177
function devClean() {
196-
console.log("\n\t" + logSymbols.info, "Cleaning dist folder for fresh start.\n");
178+
console.log(logSymbols.info, "Cleaning dist folder for fresh start.");
197179
return del([options.paths.dist.base]);
198180
}
199181

200182
const buildTasks = [
201-
devClean, // Clean Dist Folder
183+
devClean,
202184
resetPages,
203185
parallel(
204-
concatJs,
205-
concatCssPlugins,
206-
copyFonts,
207-
compileSCSS,
208-
javascriptBuild,
209-
devImages,
186+
concatJs,
187+
copyFonts,
188+
concatCssPlugins,
189+
compileSCSS,
190+
javascriptBuild,
210191
compileHTML
211192
),
212-
]
213-
214-
exports.setup = series(setupBulma);
215-
216-
exports.prod = series(
217-
...buildTasks
218-
);
219-
220-
exports.default = series(
221-
devClean, // Clean Dist Folder
222-
resetPages,
223-
parallel(copyFonts, concatCssPlugins, compileSCSS, javascriptBuild, devImages, compileHTML),
224-
livePreview, // Live Preview Build
225-
watchFiles // Watch for Live Changes
226-
);
193+
];
227194

195+
export const build = (done) => {
196+
series(devClean, resetPages, parallel(...buildTasks, optimizeImages))();
197+
done();
198+
};
199+
200+
export default (done) => {
201+
series(
202+
devClean,
203+
resetPages,
204+
parallel(...buildTasks, copyImages),
205+
parallel(livePreview, watchFiles)
206+
)();
207+
done();
208+
};

0 commit comments

Comments
 (0)