gulpfile.js

/******************************************************
 * PATTERN LAB NODE
 * EDITION-NODE-GULP
 * The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
 ******************************************************/
var gulp = require("gulp"),
  path = require("path"),
  browserSync = require("browser-sync").create(),
  argv = require("minimist")(process.argv.slice(2));

const vue = require('rollup-plugin-vue');
const { terser } = require('rollup-plugin-terser');
const rollup = require('@rollup/stream');
const buble = require('@rollup/plugin-buble');
const commonjs = require('@rollup/plugin-commonjs');
const { nodeResolve } = require('@rollup/plugin-node-resolve');
const replace = require('@rollup/plugin-replace');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const addsrc = require('gulp-add-src');
const concat = require('gulp-concat');
const postcss = require("gulp-postcss");
const tailwindcss = require("tailwindcss");
const rename = require("gulp-rename");
const assets = require("postcss-assets");


function resolvePath(pathInput) {
  return path.resolve(pathInput).replace(/\\/g, "/");
}

/******************************************************
 * COPY TASKS - stream assets from source to destination
 ******************************************************/
// Images copy
gulp.task("pl-copy:img", function (done) {
  return gulp
    .src("**/*.*", { cwd: resolvePath(paths().source.images) })
    .pipe(gulp.dest(resolvePath(paths().public.images)))
    .on("end", done);
});

// Favicon copy
gulp.task("pl-copy:favicon", function (done) {
  return gulp
    .src("favicon.ico", { cwd: resolvePath(paths().source.root) })
    .pipe(gulp.dest(resolvePath(paths().public.root)))
    .on("end", done);
});

// Iconset font copy
gulp.task("pl-copy:icons", function (done) {
  return gulp
    .src("**/*.*", { cwd: resolvePath(paths().source.iconfont) })
    .pipe(gulp.dest(resolvePath(paths().public.fonts)))
    .on("end", done);
});

// Fonts copy
gulp.task("pl-copy:font", function (done) {
  return gulp
    .src("*", { cwd: resolvePath(paths().source.fonts) })
    .pipe(gulp.dest(resolvePath(paths().public.fonts)))
    .on("end", done);
});

// Custom styleguide CSS copy
// only copy patternlab-scaffolding.css
gulp.task("pl-copy:styleguide-custom-css", function (done) {
  return gulp
    .src(resolvePath(paths().source.css) + "/pattern-scaffolding.css")
    .pipe(gulp.dest(resolvePath(paths().public.css)))
    .pipe(browserSync.stream())
    .on("end", done);
});

// Styleguide Copy everything but css
gulp.task("pl-copy:styleguide", function (done) {
  return gulp
    .src(resolvePath(paths().source.styleguide) + "/**/!(*.css)")
    .pipe(gulp.dest(resolvePath(paths().public.root)))
    .pipe(browserSync.stream())
    .on("end", done);
});

// Styleguide Copy and flatten css
gulp.task("pl-copy:styleguide-css", function (done) {
  return gulp
    .src(resolvePath(paths().source.styleguide) + "/**/*.css")
    .pipe(
      gulp.dest(function (file) {
        //flatten anything inside the styleguide into a single output dir per http://stackoverflow.com/a/34317320/1790362
        file.path = path.join(file.base, path.basename(file.path));
        return resolvePath(path.join(paths().public.styleguide, "/css"));
      })
    )
    .pipe(browserSync.stream())
    .on("end", done);
});

/******************************************************
 * PATTERN LAB CONFIGURATION - API with core library
 ******************************************************/
//read all paths from our namespaced config file
var config = require("./patternlab-config.json"),
  patternlab = require("patternlab-node")(config);

function paths() {
  return config.paths;
}

function getConfiguredCleanOption() {
  return config.cleanPublic;
}

function build(done) {
  console.log("Building Pattern Lab ...");
  patternlab.build(done, getConfiguredCleanOption());
}

gulp.task(
  "pl-assets",
  gulp.parallel(
    "pl-copy:img",
    "pl-copy:favicon",
    "pl-copy:icons",
    "pl-copy:font",
    "pl-copy:styleguide",
    "pl-copy:styleguide-css",
    "pl-copy:styleguide-custom-css",
  )
);

gulp.task("patternlab:version", function (done) {
  patternlab.version();
  done();
});

gulp.task("patternlab:help", function (done) {
  patternlab.help();
  done();
});

gulp.task("patternlab:patternsonly", function (done) {
  patternlab.patternsonly(done, getConfiguredCleanOption());
});

gulp.task("patternlab:liststarterkits", function (done) {
  patternlab.liststarterkits();
  done();
});

gulp.task("patternlab:loadstarterkit", function (done) {
  patternlab.loadstarterkit(argv.kit, argv.clean);
  done();
});

gulp.task(
  "patternlab:build",
  gulp.series("pl-assets", build)
);

gulp.task("patternlab:installplugin", function (done) {
  patternlab.installplugin(argv.plugin);
  done();
});

/******************************************************
 * SERVER AND WATCH TASKS
 ******************************************************/
// watch task utility functions
function getSupportedTemplateExtensions() {
  var engines = require("./node_modules/patternlab-node/core/lib/pattern_engines");
  return engines.getSupportedFileExtensions();
}
function getTemplateWatches() {
  return getSupportedTemplateExtensions().map(function (dotExtension) {
    return resolvePath(paths().source.patterns) + "/**/*" + dotExtension;
  });
}

function reload(done) {
  browserSync.reload();
  done();
}

function reloadCSS(done) {
  browserSync.reload("*.css");
  done();
}

function reloadJS(done) {
  browserSync.reload("*.js");
  done();
}

/******************************************************
 * TAILWIND AND POSTCSS TASKS
 ******************************************************/

gulp.task("tailwind-postcss", function (done) {
  return gulp
    .src("./source/css/style.pcss")
    .pipe(
      postcss([
        require("postcss-import"),
        tailwindcss("./tailwind.config.js"),
        require("postcss-nested"),
        // require('postcss-preset-env'),
        require("postcss-custom-properties"),
        require("autoprefixer"),
        assets({
          basePath: "source/",
          loadPaths: ["images/"],
        }),
        require("postcss-clean"),
      ])
    )
    .pipe(rename("styles.css"))
    .pipe(gulp.dest(resolvePath(paths().public.css)))
    .on("end", done);
});

function rebuild(done) {
  return gulp.series(build, reload, () => done());
}

function watch () {
  const jsPaths = [
    resolvePath(paths().source.js) + "/*.js",
    resolvePath(paths().source.js) + "/*.vue",
    resolvePath(paths().source.js) + "/**/*.js",
    resolvePath(paths().source.js) + "/**/*.vue",
  ];
  const postcssPaths = [
    resolvePath(paths().source.css) + "/*.pcss",
    resolvePath(paths().source.css) + "/**/*.pcss",
  ];

  // Detect JS changes
  gulp.watch(
    jsPaths,
    {useFsEvents: false},
    gulp.series("rollup:build", reloadJS)
  );

  // Detect postcss file changes
  gulp.watch(
    postcssPaths,
    {useFsEvents: false},
    gulp.series("tailwind-postcss", reloadCSS)
  );

  console.log("Watching following source files:", jsPaths.concat(postcssPaths));

  // Detect changes in custom styleguide CSS
  gulp.watch(
    resolvePath(paths().source.css) + "/pattern-scaffolding.css",
    {useFsEvents: false},
    gulp.series("pl-copy:styleguide-custom-css", reloadCSS)
  );

  // Detect changes in styleguide assets down in node_modules
  gulp.watch(
    [
      resolvePath(paths().source.styleguide) + "/*.*",
      resolvePath(paths().source.styleguide) + "/**/*.*",
    ],
    {useFsEvents: false},
    gulp.series("pl-copy:styleguide", "pl-copy:styleguide-css", reloadCSS)
  );

  var patternWatches = [
    resolvePath(paths().source.patterns) + "/**/*.json",
    resolvePath(paths().source.patterns) + "/**/*.md",
    resolvePath(paths().source.data) + "/**/*.json",
    resolvePath(paths().source.fonts) + "/**/*",
    resolvePath(paths().source.images) + "/**/*",
    resolvePath(paths().source.meta) + "/**/*",
    resolvePath(paths().source.annotations) + "/**/*",
  ].concat(getTemplateWatches());

  console.log("Watching following Pattern Lab files:", patternWatches);

  gulp.watch(patternWatches, {useFsEvents: false}, gulp.series(build, reload));
}

gulp.task(
  "patternlab:connect",
  function (done) {
    browserSync.init(
      {
        server: {
          baseDir: resolvePath(paths().public.root),
        },
        cors: true,
        snippetOptions: {
          // Ignore all HTML files within the templates folder
          blacklist: ["/index.html", "/", "/?*"],
        },
        notify: {
          styles: [
            "display: none",
            "padding: 15px",
            "font-family: sans-serif",
            "position: fixed",
            "font-size: 1em",
            "z-index: 9999",
            "bottom: 0px",
            "right: 0px",
            "border-top-left-radius: 5px",
            "background-color: #1B2032",
            "opacity: 0.4",
            "margin: 0",
            "color: white",
            "text-align: center",
          ],
        },
      },
      done
    );
  }
);

const buildJSBundle = (env) => {
  const isProd = env === "production";

  const plugins = [
    vue({ css: false }),
    buble({
      exclude: "node_modules/**/*",
      target: {
        chrome: 71,
        firefox: 64,
        edge: 19
      },
    }),
    commonjs(),
    nodeResolve({
      extensions: ['.js', '.vue'],
      browser: true,
      preferBuiltins: true
    }),
    replace({
      'process.env.NODE_ENV': JSON.stringify(env),
    })
  ];

  if (isProd) {
    plugins.push(terser());
  }

  return function () {
    return rollup({
      plugins,
      input: resolvePath(paths().source.js) + "/main.js",
      output: {
        format: "iife",
        sourcemap: !isProd,
        globals: {
          'vue': 'Vue',
        },
      },
      external: ["vue"],
    })
    // .on('bundle', bundle => { rollupCache = bundle })
    .pipe(source("main.bundle.js"))
    .pipe(buffer())
    // .pipe(addsrc.prepend([
    //   './node_modules/vue/dist/vue.js'
    // ]))
    // .pipe(concat("main.bundle.js"))
    .pipe(gulp.dest("./public/js"));
  };
}

gulp.task('rollup:build', buildJSBundle("development"));
gulp.task('rollup:build:production', buildJSBundle("production"));

gulp.task(
  "site:build",
  gulp.parallel("tailwind-postcss", "patternlab:build", "rollup:build")
);

gulp.task(
  "site:build:production",
  // Build patternlab first to have all the necessary CSS classes ready for auto purge.
  gulp.series("patternlab:build", gulp.parallel("tailwind-postcss", "rollup:build:production"))
);

/******************************************************
 * COMPOUND TASKS
 ******************************************************/
gulp.task("default", gulp.series("site:build:production"));
gulp.task("patternlab:watch", gulp.series("site:build", watch));
gulp.task(
  "patternlab:serve",
  gulp.series("site:build", "patternlab:connect", watch)
);