1

I have made an app using Yeoman, and it's working correctly on localhost, it's using a service worker to make it a progressive web app. This is my gulpfile , as provided by yeoman, I have added gulp-gh-pages to it

Thank you in advance

I'm filling this post so it can be sent || I'm filling this post so it can be sent || I'm filling this post so it can be sent

:

// generated on 2018-06-24 using generator-webapp 3.0.1
const gulp = require("gulp");
const gulpLoadPlugins = require("gulp-load-plugins");
const browserSync = require("browser-sync").create();
const del = require("del");
const wiredep = require("wiredep").stream;
const runSequence = require("run-sequence");
const ghPages = require("gulp-gh-pages"); // for deploying to GitHub pages
const browserify = require("browserify");
const babelify = require("babelify");
const buffer = require("vinyl-buffer");
const source = require("vinyl-source-stream");

const $ = gulpLoadPlugins();
const reload = browserSync.reload;

let dev = true;

gulp.task("styles", () => {
  return gulp
    .src("app/styles/*.scss")
    .pipe($.plumber())
    .pipe($.if(dev, $.sourcemaps.init()))
    .pipe(
      $.sass
        .sync({
          outputStyle: "expanded",
          precision: 10,
          includePaths: ["."]
        })
        .on("error", $.sass.logError)
    )
    .pipe(
      $.autoprefixer({ browsers: ["> 1%", "last 2 versions", "Firefox ESR"] })
    )
    .pipe($.if(dev, $.sourcemaps.write()))
    .pipe(gulp.dest(".tmp/styles"))
    .pipe(reload({ stream: true }));
});

gulp.task("scripts", () => {
  //return gulp.src('app/scripts/**/*.js')
  const b = browserify({
    entries: "app/scripts/main.js",
    transform: babelify,
    debug: true
  });
  return b.bundle()
    .pipe(source("bundle.js"))
    .pipe($.plumber())
    //.pipe($.if(dev, $.sourcemaps.init()))
    //.pipe($.babel())
    .pipe(buffer())
    .pipe($.sourcemaps.init({loadMaps: true}))
    .pipe($.if(dev, $.sourcemaps.write(".")))
    .pipe(gulp.dest(".tmp/scripts"))
    .pipe(reload({ stream: true }));
});

function lint(files) {
  return gulp
    .src(files)
    .pipe($.eslint({ fix: true }))
    .pipe(reload({ stream: true, once: true }))
    .pipe($.eslint.format())
    .pipe($.if(!browserSync.active, $.eslint.failAfterError()));
}

gulp.task("lint", () => {
  return lint("app/scripts/**/*.js").pipe(gulp.dest("app/scripts"));
});
gulp.task("lint:test", () => {
  return lint("test/spec/**/*.js").pipe(gulp.dest("test/spec"));
});

gulp.task("html", ["styles", "scripts"], () => {
  return gulp
    .src("app/*.html")
    .pipe($.useref({ searchPath: [".tmp", "app", "."] }))
    .pipe($.if(/\.js$/, $.uglify({ compress: { drop_console: true } })))
    .pipe($.if(/\.css$/, $.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(gulp.dest("dist"));
});

gulp.task("images", () => {
  return gulp
    .src("app/images/**/*")
    .pipe($.cache($.imagemin()))
    .pipe(gulp.dest("dist/images"));
});

gulp.task("fonts", () => {
  return gulp
    .src(
      require("main-bower-files")("**/*.{eot,svg,ttf,woff,woff2}", function(
        err
      ) {}).concat("app/fonts/**/*")
    )
    .pipe($.if(dev, gulp.dest(".tmp/fonts"), gulp.dest("dist/fonts")));
});

gulp.task("extras", () => {
  return gulp
    .src(["app/*", "!app/*.html"], {
      dot: true
    })
    .pipe(gulp.dest("dist"));
});

gulp.task("clean", del.bind(null, [".tmp", "dist"]));

gulp.task("serve", () => {
  runSequence(["clean", "wiredep"], ["styles", "scripts", "fonts"], () => {
    browserSync.init({
      notify: false,
      port: 9000,
      server: {
        baseDir: [".tmp", "app"],
        routes: {
          "/bower_components": "bower_components"
        }
      }
    });

    gulp
      .watch(["app/*.html", "app/images/**/*", ".tmp/fonts/**/*"])
      .on("change", reload);

    gulp.watch("app/styles/**/*.scss", ["styles"]);
    gulp.watch("app/scripts/**/*.js", ["scripts"]);
    gulp.watch("app/fonts/**/*", ["fonts"]);
    gulp.watch("bower.json", ["wiredep", "fonts"]);
  });
});

gulp.task("serve:dist", ["default"], () => {
  browserSync.init({
    notify: false,
    port: 9000,
    server: {
      baseDir: ["dist"]
    }
  });
});

gulp.task("serve:test", ["scripts"], () => {
  browserSync.init({
    notify: false,
    port: 9000,
    ui: false,
    server: {
      baseDir: "test",
      routes: {
        "/scripts": ".tmp/scripts",
        "/bower_components": "bower_components"
      }
    }
  });

  gulp.watch("app/scripts/**/*.js", ["scripts"]);
  gulp.watch(["test/spec/**/*.js", "test/index.html"]).on("change", reload);
  gulp.watch("test/spec/**/*.js", ["lint:test"]);
});

// inject bower components
gulp.task("wiredep", () => {
  gulp
    .src("app/styles/*.scss")
    .pipe($.filter(file => file.stat && file.stat.size))
    .pipe(
      wiredep({
        ignorePath: /^(\.\.\/)+/
      })
    )
    .pipe(gulp.dest("app/styles"));

  gulp
    .src("app/*.html")
    .pipe(
      wiredep({
        ignorePath: /^(\.\.\/)*\.\./
      })
    )
    .pipe(gulp.dest("app"));
});

gulp.task("build", ["lint", "html", "images", "fonts", "extras"], () => {
  return gulp.src("dist/**/*").pipe($.size({ title: "build", gzip: true }));
});

gulp.task("default", () => {
  return new Promise(resolve => {
    dev = false;
    runSequence(["clean", "wiredep"], "build", resolve);
  });
});

// Deploy to gh-pages
gulp.task("deploy", ["default"], () => {
  return gulp.src("dist/**/*").pipe($.ghPages());
});

And the service worker won't work on GitHub pages!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.