11// FIRST LOAD EVERYTHING NEEDED…
2- const { series, parallel, src, dest, watch } = require ( ' gulp' ) ,
3- { readFileSync } = require ( 'fs' ) ,
4- del = require ( ' del' ) ,
5- sass = require ( ' gulp-dart-sass' ) ,
6- sourcemaps = require ( ' gulp-sourcemaps' ) ,
7- postcss = require ( ' gulp-postcss' ) ,
8- autoprefixer = require ( ' autoprefixer' ) ,
9- uncss = require ( ' postcss-uncss' ) ,
10- csso = require ( ' gulp-csso' ) ,
11- nunjucks = require ( ' gulp-nunjucks' ) ,
12- browserSync = require ( ' browser-sync' ) . create ( ) ;
2+ const { series, parallel, src, dest, watch } = require ( " gulp" ) ,
3+ { readFileSync } = require ( "fs" ) ,
4+ del = require ( " del" ) ,
5+ sass = require ( " gulp-dart-sass" ) ,
6+ sourcemaps = require ( " gulp-sourcemaps" ) ,
7+ postcss = require ( " gulp-postcss" ) ,
8+ autoprefixer = require ( " autoprefixer" ) ,
9+ uncss = require ( " postcss-uncss" ) ,
10+ csso = require ( " gulp-csso" ) ,
11+ nunjucks = require ( " gulp-nunjucks" ) ,
12+ browserSync = require ( " browser-sync" ) . create ( ) ;
1313
1414// DEFINE FUNCTIONS
1515
1616// 1) functions to delete parts of generated files in dist folder
1717
1818// delete all files
19- const allCleanup = ( ) => del ( ' dist/**/*' ) ;
19+ const allCleanup = ( ) => del ( " dist/**/*" ) ;
2020
2121// delete all HTML files
22- const htmlCleanup = ( ) => del ( ' dist/**/*.html' ) ;
22+ const htmlCleanup = ( ) => del ( " dist/**/*.html" ) ;
2323
2424// delete all CSS files and their sourcemaps
25- const cssCleanup = ( ) => del ( ' dist/*.{css,css.map}' ) ;
25+ const cssCleanup = ( ) => del ( " dist/*.{css,css.map}" ) ;
2626
2727// delete static files
28- const staticCleanup = ( ) => del (
29- [
30- 'dist/**/*' , // delete all files from /dist/
31- '!dist/**/*.{html,css,css.map}' , // except HTML, CSS and CSS map files
32- ] ,
33- { onlyFiles : true } // do not delete folders (would delete all folders otherwise)
34- ) ;
28+ const staticCleanup = ( ) =>
29+ del (
30+ [
31+ "dist/**/*" , // delete all files from /dist/
32+ "!dist/**/*.{html,css,css.map}" , // except HTML, CSS and CSS map files
33+ ] ,
34+ { onlyFiles : true } // do not delete folders (would delete all folders otherwise)
35+ ) ;
3536
3637// 2) functions that generate files
3738
3839// compile Nunjucks templates to html files
39- const htmlCompile = ( ) => src ( 'src/templates/**/[^_]*.njk' )
40- // import data from data.json
41- . pipe ( nunjucks . compile ( JSON . parse ( String ( readFileSync ( 'src/data.json' ) ) ) ) )
42- . pipe ( dest ( './dist/' ) ) ; // put compiled html into dist folder
40+ const htmlCompile = ( ) =>
41+ src ( "src/templates/**/[^_]*.njk" )
42+ // import data from data.json
43+ . pipe ( nunjucks . compile ( JSON . parse ( String ( readFileSync ( "src/data.json" ) ) ) ) )
44+ . pipe ( dest ( "./dist/" ) ) ; // put compiled html into dist folder
4345
4446// create and process CSS
45- const sassCompile = ( ) => src ( 'src/scss/index.scss' ) // this is the source for compilation
46- . pipe ( sourcemaps . init ( ) ) // initalizes a sourcemap
47- . pipe ( sass . sync ( ) . on ( 'error' , sass . logError ) ) // compile SCSS to CSS and also tell us about a problem if happens
48- . pipe (
49- postcss ( [
50- autoprefixer , // automatically adds vendor prefixes if needed
51- // see browserslist in package.json for included browsers
52- // Official Bootstrap browser support policy:
53- // https://getbootstrap.com/docs/5.2/getting-started/browsers-devices/#supported-browsers
54- ] )
55- )
56- . pipe ( csso ( ) ) // compresses CSS
57- . pipe ( sourcemaps . write ( './' ) ) // writes the sourcemap
58- . pipe ( dest ( './dist' ) ) // destination of the resulting CSS
59- . pipe ( browserSync . stream ( ) ) ; // tell browsersync to inject compiled CSS
47+ const sassCompile = ( ) =>
48+ src ( "src/scss/index.scss" ) // this is the source for compilation
49+ . pipe ( sourcemaps . init ( ) ) // initalizes a sourcemap
50+ . pipe ( sass . sync ( ) . on ( "error" , sass . logError ) ) // compile SCSS to CSS and also tell us about a problem if happens
51+ . pipe (
52+ postcss ( [
53+ autoprefixer , // automatically adds vendor prefixes if needed
54+ // see browserslist in package.json for included browsers
55+ // Official Bootstrap browser support policy:
56+ // https://getbootstrap.com/docs/5.2/getting-started/browsers-devices/#supported-browsers
57+ ] )
58+ )
59+ . pipe ( csso ( ) ) // compresses CSS
60+ . pipe ( sourcemaps . write ( "./" ) ) // writes the sourcemap
61+ . pipe ( dest ( "./dist" ) ) // destination of the resulting CSS
62+ . pipe ( browserSync . stream ( ) ) ; // tell browsersync to inject compiled CSS
6063
6164// remove unused CSS (classes not used in generated HTML)
62- const removeUnusedCss = ( ) => src ( 'dist/index.css' )
63- . pipe (
64- postcss ( [
65- uncss ( {
66- html : [ 'dist/**/*.html' ] ,
67- media : [ 'print' ] , // process additional media queries
68- ignore : [ ] , // provide a list of selectors that should not be removed by UnCSS
69- } ) ,
70- ] )
71- )
72- . pipe ( dest ( 'dist' ) ) ;
65+ const removeUnusedCss = ( ) =>
66+ src ( "dist/index.css" )
67+ . pipe (
68+ postcss ( [
69+ uncss ( {
70+ html : [ "dist/**/*.html" ] ,
71+ media : [ "print" ] , // process additional media queries
72+ ignore : [ ] , // provide a list of selectors that should not be removed by UnCSS
73+ } ) ,
74+ ] )
75+ )
76+ . pipe ( dest ( "dist" ) ) ;
7377
7478// copy all files from /src/static/ to /dist/static/
75- const copyStatic = ( ) => src ( ' src/static/**/*' ) . pipe ( dest ( ' dist' ) )
79+ const copyStatic = ( ) => src ( " src/static/**/*" ) . pipe ( dest ( " dist" ) ) ;
7680
7781// 3) functions to watch and serve
7882// development with automatic refreshing after changes to CSS, templates or static files
79- const startBrowsersync = ( ) => browserSync . init ( { // initalize Browsersync
80- // port: 8080, // set different port
81- // open: false, // don’t open browser
82- // ghostMode: false, // CLICKS, scrolls & form inputs on any device will not be mirrored to all others
83- // reloadOnRestart: true, // reload each browser when Browsersync is restarted
84- server : {
85- baseDir : 'dist' , // serve from this folder
86- serveStaticOptions : {
87- // trying an extension when one isn't specified:
88- // effectively means that http://localhost:3000/another-page
89- // shows file named another-page.html
90- extensions : [ 'html' ] ,
83+ const startBrowsersync = ( ) =>
84+ browserSync . init ( {
85+ // initalize Browsersync
86+ // port: 8080, // set different port
87+ // open: false, // don’t open browser
88+ // ghostMode: false, // CLICKS, scrolls & form inputs on any device will not be mirrored to all others
89+ // reloadOnRestart: true, // reload each browser when Browsersync is restarted
90+ server : {
91+ baseDir : "dist" , // serve from this folder
92+ serveStaticOptions : {
93+ // trying an extension when one isn't specified:
94+ // effectively means that http://localhost:3000/another-page
95+ // shows file named another-page.html
96+ extensions : [ "html" ] ,
97+ } ,
9198 } ,
92- } ,
93- } ) ;
99+ } ) ;
94100
95101// a function to reload Browsersync
96102const reloadBrowserSync = ( cb ) => {
@@ -101,12 +107,12 @@ const reloadBrowserSync = (cb) => {
101107// a function to watch for changes
102108const watchFiles = ( ) => {
103109 // SCSS changed: run task to compile it again
104- watch ( ' src/scss/**/*' , processCss ) ;
110+ watch ( " src/scss/**/*" , processCss ) ;
105111 // templates or data file changed: run task to generate HTML again and reload
106- watch ( [ ' src/templates/**/*' , ' src/data.json' ] , series ( processHtml , reloadBrowserSync ) ) ;
112+ watch ( [ " src/templates/**/*" , " src/data.json" ] , series ( processHtml , reloadBrowserSync ) ) ;
107113 // static files changed: run task to copy them again and reload
108- watch ( ' src/static/**/*' , series ( processStatic , reloadBrowserSync ) ) ;
109- }
114+ watch ( " src/static/**/*" , series ( processStatic , reloadBrowserSync ) ) ;
115+ } ;
110116
111117// COMPOSE TASKS
112118
@@ -128,12 +134,7 @@ exports.develop = series(
128134) ;
129135
130136// build everything for production
131- exports . build = series (
132- allCleanup ,
133- htmlCompile ,
134- parallel ( sassCompile , copyStatic ) ,
135- removeUnusedCss
136- ) ;
137+ exports . build = series ( allCleanup , htmlCompile , parallel ( sassCompile , copyStatic ) , removeUnusedCss ) ;
137138
138139// the default task runs when you run just `gulp`
139140exports . default = exports . develop ;
0 commit comments