Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
build(gulp): improve dev workflow pipeline with gulp
Browse files Browse the repository at this point in the history
chrispymm committed Jul 5, 2024
1 parent c157388 commit 2dd36cf
Showing 5 changed files with 757 additions and 104 deletions.
60 changes: 6 additions & 54 deletions .eleventy.js
Original file line number Diff line number Diff line change
@@ -164,59 +164,6 @@ module.exports = function (eleventyConfig) {

// Rebuild when a change is made to a component template file
eleventyConfig.addWatchTarget("src/moj/components/**/*.njk");
// Rebuild when gulp has processed component js to the package dir
eleventyConfig.addWatchTarget("package/moj/all.js");

// Allow 11ty to watch and compile the docs site SCSS
eleventyConfig.addTemplateFormats("scss");
eleventyConfig.addExtension("scss", {
outputFileExtension: "css",
compile: async function (inputContent, inputPath) {
// Skip files like _fileName.scss
let parsed = path.parse(inputPath);
if (parsed.name.startsWith("_")) {
return;
}

// Run file content through Sass
let result = sass.compileString(inputContent, {
loadPaths: [parsed.dir, ".", "../", "../../", "../../../", "node_modules"],
sourceMap: false, // or true, your choice!
});

// Allow included files from @use or @import to
// trigger rebuilds when using --incremental
this.addDependencies(inputPath, result.loadedUrls);

return async () => {
return result.css;
};
},
});

// Allow 11ty to watch and parse the docs site JS
eleventyConfig.addTemplateFormats('js');
eleventyConfig.addExtension('js', {
outputFileExtension: 'js',
compile: async (content, path) => {
// Only process the all.js file, the others are imported
if (!path.includes('all')) {
return;
}

return async () => {
let output = await esbuild.build({
target: 'es6',
entryPoints: [path],
minify: true,
bundle: true,
write: false,
});

return output.outputFiles[0].text;
}
}
});

// Copy the docs images to the public assets dir
eleventyConfig.addPassthroughCopy( { "docs/assets/images/": "assets/images/"});
@@ -229,9 +176,14 @@ module.exports = function (eleventyConfig) {
liveReload: true,
domDiff: false,
port: 8080,
// Reload once assets have been rebuilt by gulp
watch: [
'public/assets/stylesheets/application.css',
'public/assets/javascript/all.js'
],
// Show local network IP addresses for device testing
showAllHosts: true,
// Show the dev server version number on the command line
showVersion: true,
});
});
};
63 changes: 63 additions & 0 deletions gulp/docs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const {createGulpEsbuild} = require("gulp-esbuild")
const esbuild = createGulpEsbuild({
incremental: false, // enables the esbuild"s incremental build
piping: true, // enables piping
})

// Copy all the govuk-frontend assets across
gulp.task(
"docs:copy-dependencies", () => {
return gulp.src([
"node_modules/govuk-frontend/dist/govuk/assets/**/*",
"src/moj/assets/**/*"
])
.pipe(gulp.dest("public/assets"))
}
);

// Copy package vendor files across
gulp.task(
"docs:copy-vendor", () => {
return gulp.src([
"src/moj/vendor/**/*.js"
])
.pipe(gulp.dest("public/assets/javascript"))
}
);

// Ordering is important here! - Docs > Package > GovUK frontend
gulp.task(
"docs:copy-files", gulp.series(
"docs:copy-dependencies",
"docs:copy-vendor",
)
);

// Compile the docs site stylesheet
gulp.task(
"docs:styles", () => {
return gulp
.src("docs/assets/stylesheets/application.scss")
.pipe(sass())
.pipe(gulp.dest("public/assets/stylesheets"));
}
);

// Bundle the docs site javascript
gulp.task(
"docs:scripts", () => {
return gulp
.src("docs/assets/javascript/all.js")
.pipe(esbuild({
outfile: "all.js",
target: "es6",
bundle: true,
}))
.pipe(gulp.dest("public/assets/javascript"))
}
);



84 changes: 47 additions & 37 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -3,59 +3,69 @@ const requireDir = require("require-dir");

requireDir("./gulp");

const buildPackage = gulp.series(
// Copy ./src directory and build scripts into ./package
gulp.task(
"build:package", gulp.series(
"build:clean",
"build:copy-files",
"build:javascript",
"build:javascript-with-jquery",
"build:compress-images",
);
)
);

// Build the dist bundle of the package
gulp.task(
"build:package", buildPackage
"build:dist", gulp.series(
"dist:clean",
"dist:javascript",
"dist:css",
"dist:assets",
"dist:zip",
)
);

// Initial build of the docs site to ./public
gulp.task(
"build:dist", gulp.series(
"dist:clean",
"dist:javascript",
"dist:css",
"dist:assets",
"dist:zip"
)
"build:docs", gulp.series(
"docs:copy-files",
"build:package",
gulp.parallel("docs:styles", "docs:scripts"),
)
);

// Watch the docs site sass and all component sass files and recompile
gulp.task(
"docs:copy-dependencies", () => {
return gulp.src([
'node_modules/govuk-frontend/dist/govuk/assets/**/*',
'src/moj/assets/**/*'
])
.pipe(gulp.dest('public/assets'))
"watch:styles", () => {
gulp.watch(
["docs/assets/**.*.scss", "src/moj/components/**/*.scss"],
gulp.series(["docs:styles"]),
)
}
)
);

// Watch all the component js files and build the package
gulp.task(
"docs:copy-vendor", () => {
return gulp.src([
'src/moj/vendor/**/*.js'
])
.pipe(gulp.dest('public/assets/javascript'))
"watch:package-js", () => {
gulp.watch(
["src/moj/components/**/*.js"],
gulp.series("build:javascript")
)
}
)
);

// Watch the docs js files and the bundled package js and rebuild
gulp.task(
"build:docs", gulp.series(
"docs:copy-dependencies",
"docs:copy-vendor",
buildPackage
)
)

gulp.task('watch:package', function() {
gulp.watch([
'src/moj/components/**/*.scss',
'src/moj/components/**/*.js'
],
buildPackage);
})
"watch:docs-js", () => {
gulp.watch(
["docs/assets/**/*.js", "package/moj/all.js"],
gulp.series(["docs:scripts"]),
)
}
);

// Watch all the files in dev
gulp.task(
"watch:dev",
gulp.parallel("watch:styles", "watch:package-js", "watch:docs-js"),
);
Loading

0 comments on commit 2dd36cf

Please sign in to comment.