browserSync integration

[danizen]

With #5, I asked a very general question (which was unanswered). Now I am moving to @uswds/compile, and I wonder about something more specific. How can I both utilize the compileSass export and also integrate with browserSync?

I have modified the task "build-sass" from uswds-gulp as follows:

gulp.task("build-sass", function (done) {
  var plugins = [
    // Autoprefix
    autoprefixer({
      cascade: false,
      grid: true,
    }),
    // Minify
    csso({ forceMediaMerge: false }),
  ];
  return (
    gulp
      .src([`${PROJECT_SASS_SRC}/*.scss`])
      .pipe(sourcemaps.init({ largeFile: true }))
      .pipe(
        sass.sync({
          includePaths: [
            `${PROJECT_SASS_SRC}`,
            `${uswds}/scss`,
            `${uswds}/scss/packages`,
          ],
        })
      )
      .pipe(replace(/\buswds @version\b/g, "based on uswds v" + pkg.version))
      .pipe(postcss(plugins))
      .pipe(sourcemaps.write("."))
      // uncomment the next line if necessary for Jekyll to build properly
      //.pipe(gulp.dest(`${SITE_CSS_DEST}`))
      .pipe(gulp.dest(`${CSS_DEST}`))
      .pipe(browserSync.stream())
  );
});

[mejiaj]

@danizen sorry, I thought I answered that question you mentioned somewhere else.

My answer was, we'll do security updates where possible, but we won't do active development on uswds-gulp. Users should switch to uswds compile.

For browserSync, the method you mention above works. You could try manual reloading.

For now, I think we're okay leaving it in the hands of the user. If there's enough interest we can take another look at integrating something, maybe a browsersync flag 🤔.

[danizen]

@mejiaj ,

Since the method uswds.compileSass returns a Vinyl stream (iterator of vinyl objects), this could be called by my method and piped to browser Sync, but this is a level of integration that forces me to interact very low level.

A better integration method turned out to explicitly monitor the files that my build produces, and then I can define a series that uses the uswds provided tasks:

function initServe(cb) {
  browserSync.init({
    "server": {
      "baseDir": ["./examples", "./dist"],
      "index": "index.htm"
    },
    "files": [
      "./dist/css/nlm-uswds.css",
      "./examples/basic.htm",
      "./examples/alla.htm",
      "./examples/index.htm"
    ]
  });
  cb();
}

exports.serve = gulp.series(uswds.updateUswds, initServe, uswds.watch);

I suggest that the label be changed then from "enhancement" to "documentation" and you might simply add it to the README or some example code. I will ask whether I can make our build public, and if so, put a link to it here.

[danizen]

Nevermind - this can be changed to documentation or simply closed, whenever.

[mejiaj]

Hey @danizen! Thank you for the examples and suggestions.

We've decided to not include this specific example into our docs, but we do want to improve our documentation and code (if needed) to work better with user tasks.

One of the major drivers of creating this package was to improve interoperability with users' own tasks. I've created this issue #18. We'll be using your feedback and other customer feedback to improve our docs. Thanks again!