Update gulpfile.js

app/templates/gulpfile.js

@@ -1,103 +1,152 @@
-// generated on <%= date %> using <%= name %> <%= version %>
 const { src, dest, watch, series, parallel, lastRun } = require('gulp');
 const gulpLoadPlugins = require('gulp-load-plugins');
-<%_ if (includeModernizr) { -%>
-const fs = require('fs');
-const mkdirp = require('mkdirp');
-const Modernizr = require('modernizr');
-<%_ } -%>
 const browserSync = require('browser-sync');
 const del = require('del');
 const autoprefixer = require('autoprefixer');
-<%_ if (includeSass) { -%>
 const sass = require('gulp-sass')(require('sass'));
-<%_ } -%>
 const cssnano = require('cssnano');
 const { argv } = require('yargs');
 
 const $ = gulpLoadPlugins();
 const server = browserSync.create();
-
 const port = argv.port || 9000;
 
 const isProd = process.env.NODE_ENV === 'production';
 const isTest = process.env.NODE_ENV === 'test';
 const isDev = !isProd && !isTest;
 
+// Task for styles
 function styles() {
-  <%_ if (includeSass) { -%>
-  return src('app/styles/*.scss', {
-    sourcemaps: !isProd,
-  })
+  return src('app/styles/*.scss', { sourcemaps: !isProd })
     .pipe($.plumber())
-    .pipe(sass.sync({
-      outputStyle: 'expanded',
-      precision: 10,
-      includePaths: ['.']
-    }).on('error', sass.logError))
-  <%_ } else { -%>
-  return src('app/styles/*.css', {
-    sourcemaps: !isProd,
-  })
-  <%_ } -%>
-    .pipe($.postcss([
-      autoprefixer()
-    ]))
-    .pipe(dest('.tmp/styles', {
-      sourcemaps: !isProd,
-    }))
-    .pipe(server.reload({stream: true}));
-};
+    .pipe(sass.sync({ outputStyle: 'expanded', precision: 10, includePaths: ['.'] })
+      .on('error', sass.logError))
+    .pipe($.postcss([autoprefixer()]))
+    .pipe(dest('.tmp/styles', { sourcemaps: !isProd }))
+    .pipe(server.reload({ stream: true }));
+}
 
+// Task for scripts
 function scripts() {
-  return src('app/scripts/**/*.js', {
-    sourcemaps: !isProd,
-  })
+  return src('app/scripts/**/*.js', { sourcemaps: !isProd })
     .pipe($.plumber())
     .pipe($.babel())
-    .pipe(dest('.tmp/scripts', {
-      sourcemaps: !isProd ? '.' : false,
-    }))
-    .pipe(server.reload({stream: true}));
-};
+    .pipe(dest('.tmp/scripts', { sourcemaps: !isProd ? '.' : false }))
+    .pipe(server.reload({ stream: true }));
+}
 
-<%_ if (includeModernizr) { -%>
-async function modernizr() {
-  const readConfig = () => new Promise((resolve, reject) => {
-    fs.readFile(`${__dirname}/modernizr.json`, 'utf8', (err, data) => {
-      if (err) reject(err);
-      resolve(JSON.parse(data));
-    })
-  })
-  const createDir = () => new Promise((resolve, reject) => {
-    mkdirp(`${__dirname}/.tmp/scripts`, err => {
-      if (err) reject(err);
-      resolve();
-    })
-  });
-  const generateScript = config => new Promise((resolve, reject) => {
-    Modernizr.build(config, content => {
-      fs.writeFile(`${__dirname}/.tmp/scripts/modernizr.js`, content, err => {
-        if (err) reject(err);
-        resolve(content);
-      });
-    })
+// Task for linting
+function lint() {
+  return src('app/scripts/**/*.js')
+    .pipe($.eslint({ fix: true }))
+    .pipe(server.reload({ stream: true, once: true }))
+    .pipe($.eslint.format())
+    .pipe($.if(!server.active, $.eslint.failAfterError()))
+    .pipe(dest('app/scripts'));
+}
+
+// Task for HTML processing
+function html() {
+  return src('app/*.html')
+    .pipe($.useref({ searchPath: ['.tmp', 'app', '.'] }))
+    .pipe($.if(/\.js$/, $.uglify({ compress: { drop_console: true } })))
+    .pipe($.if(/\.css$/, $.postcss([cssnano({ safe: true, autoprefixer: false })])))
+    .pipe($.if(/\.html$/, $.htmlmin({
+      collapseWhitespace: true,
+      minifyCSS: true,
+      minifyJS: { compress: { drop_console: true } },
+      processConditionalComments: true,
+      removeComments: true,
+      removeEmptyAttributes: true,
+      removeScriptTypeAttributes: true,
+      removeStyleLinkTypeAttributes: true
+    })))
+    .pipe(dest('dist'));
+}
+
+// Task for images optimization
+function images() {
+  return src('app/images/**/*', { since: lastRun(images) })
+    .pipe($.imagemin())
+    .pipe(dest('dist/images'));
+}
+
+// Task for fonts
+function fonts() {
+  return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
+    .pipe($.if(!isProd, dest('.tmp/fonts'), dest('dist/fonts')));
+}
+
+// Task for extras
+function extras() {
+  return src(['app/*', '!app/*.html'], { dot: true })
+    .pipe(dest('dist'));
+}
+
+// Task for cleaning
+function clean() {
+  return del(['.tmp', 'dist']);
+}
+
+// Measure size of build
+function measureSize() {
+  return src('dist/**/*')
+    .pipe($.size({ title: 'build', gzip: true }));
+}
+
+// Build process
+const build = series(
+  clean,
+  parallel(lint, series(parallel(styles, scripts), html), images, fonts, extras),
+  measureSize
+);
+
+// Development server
+function startAppServer() {
+  server.init({
+    notify: false,
+    port,
+    server: {
+      baseDir: ['.tmp', 'app'],
+      routes: {
+        '/node_modules': 'node_modules'
+      }
+    }
   });
 
-  const [config] = await Promise.all([
-    readConfig(),
-    createDir()
-  ]);
-  await generateScript(config);
+  watch(['app/*.html', 'app/images/**/*', '.tmp/fonts/**/*']).on('change', server.reload);
+  watch('app/styles/**/*.scss', styles);
+  watch('app/scripts/**/*.js', scripts);
+  watch('app/fonts/**/*', fonts);
 }
-<%_ } -%>
 
-const lintBase = (files, options) => {
-  return src(files)
-    .pipe($.eslint(options))
-    .pipe(server.reload({stream: true, once: true}))
-    .pipe($.eslint.format())
-    .pipe($.if(!server.active, $.eslint.failAfterError()));
+// Choose server based on environment
+let serve;
+if (isDev) {
+  serve = series(clean, parallel(styles, scripts, fonts), startAppServer);
+} else if (isTest) {
+  serve = series(clean, scripts, startAppServer);
+} else if (isProd) {
+  serve = series(build, startAppServer);
+}
+
+exports.serve = serve;
+exports.build = build;
+exports.default = build;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 }
 function lint() {
   return lintBase('app/scripts/**/*.js', { fix: true })