- Create Newsletter Page: MailingList (without the class style, using Gulp tasks)#94

gulpfile.js

@@ -0,0 +1,73 @@
+const gulp = require('gulp');
+const pug = require('gulp-pug');
+const sass = require('gulp-sass');
+const replace = require('gulp-replace');
+const inlineCss = require('gulp-inline-css');
+const rename = require('gulp-rename');
+const browserSync = require('browser-sync').create();
+
+// browserSync base directory
+// this will be the base directory of files for web preview
+// since we are building `index.pug` templates (located in src/emails) to `dist` folder.
+const baseDir = "./dist";
+
+// compile sass to css
+gulp.task('compileSass', function () {
+  return gulp
+  // import all email .scss files from src/scss folder
+  // ** means any sub or deep-sub files or foders
+    .src('./sass/**/*.scss')
+
+    // on error, do not break the process
+    .pipe(sass().on('error', sass.logError))
+
+    // output to `src/css` folder
+    .pipe(gulp.dest('./css'));
+});
+
+// build complete HTML email template
+// compile sass (compileSass task) before running build
+gulp.task('build', gulp.series('compileSass', function () {
+  return gulp
+  // import all email template (name ending with .template.pug) files from src/emails folder
+    .src('emails/**/*.template.pug')
+
+    // replace `.scss` file paths from template with compiled file paths
+    .pipe(replace(new RegExp('\/sass\/(.+)\.scss', 'ig'), '/css/$1.css'))
+
+    // compile using Pug
+    .pipe(pug())
+
+    // inline CSS
+    .pipe(inlineCss())
+
+    // do not generate sub-folders inside dist folder
+    .pipe(rename({dirname: ''}))
+
+    // put compiled HTML email templates inside dist folder
+    .pipe(gulp.dest('dist'))
+}));
+
+// browserSync task to launch preview server
+gulp.task('browserSync', function () {
+  return browserSync.init({
+    reloadDelay: 2000, // reload after 2s, compilation is finished (hopefully)
+    port: 3002,
+    server: { baseDir: baseDir }
+  });
+});
+
+// task to reload browserSync
+gulp.task('reloadBrowserSync', function () {
+  return browserSync.reload();
+});
+
+// watch source files for changes
+// run `build` task when anything inside `src` folder changes (except .css)
+// and reload browserSync
+gulp.task('watch', gulp.series('build', 'browserSync', function () {
+  return gulp.watch([
+    'emails/**/*',
+    '!emails/**/*.css',
+  ], ['build', 'reloadBrowserSync']);
+}));