-
Notifications
You must be signed in to change notification settings - Fork 12
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update to new task composition and compile API #1
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add a label to tasks to inform user what's happening
- Use lowercase paths - Tell user where files are being copied to - Fix copyJS task
- Update USWDS package.json path - Cleanup final exported tasks - Remove duplicate package
Don't use globs as paths Add theme source in addition to sass
- collect compile settings within compile - use copy instead of usaTasks - Use theme instead of setup
- simplify paths code - use gulp-if to output to the jekyll directory
This should prevent conflicts
Seems sass-embedded does not yet support includePaths
This was referenced Jan 18, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
USWDS Compile
Simple Gulp 4.0 functions for copying USWDS static assets and transforming USWDS Sass into browser-readable CSS.
Requirements
Installation
Install
@uswds/compile
in the project root:Usage
Overview
gulpfile.js
file in the project root that includes the following:@uswds/compile
packagenpx gulp [function]
Gulpfile setup
Create a file called
gulpfile.js
at the root of your project (or use an existing Gulpfile if one already exists). It needs to do the following@uswds/compile
packageHere's an example of how your
gulpfile.js
might look:Path settings
Use path settings to customize where USWDS Compile looks for USWDS source and outputs processed files.
paths.src.uswds
"./node_modules/uswds/dist"
uswds
packagepaths.src.sass
"./node_modules/uswds/dist/scss"
paths.src.theme
"./node_modules/uswds/dist/scss/theme"
paths.src.fonts
"./node_modules/uswds/dist/fonts"
paths.src.img
"./node_modules/uswds/dist/img"
paths.src.js
"./node_modules/uswds/dist/js"
paths.src.projectSass
"./sass"
paths.dist.sass
. Thewatch
script will watch this directory for changes.paths.dist.sass
"./sass"
paths.dist.img
"./assets/uswds/images"
paths.dist.fonts
"./assets/uswds/fonts"
paths.dist.js
"./assets/uswds/js"
paths.dist.css
"./assets/uswds/css"
Functions
Export USWDS Compile functions in your project's
gulpfile.js
to use them in your project.compile
compileSass
+compileIcons
compileIcons
paths.dist.img
compileSass
paths.dist.css
default
watch
copyAll
copySetup
+copyAssets
copyAssets
copyFonts
+copyImages
+copyJS
copyFonts
paths.dist.fonts
copyImages
paths.dist.img
copyJS
paths.dist.js
copySetup
uswds
package topaths.dist.sass
init
copyAll
+compile
updateUswds
copyAssets
+compile
watch
paths.dist.sass
andpaths.src.projectSass
Running the compile functions
For any function you defined as an
export
in yourgulpfile.js
you can runnpx gulp [function]
For example, if you have the following
gulpfile.js
:With that setup, you could do the following in the terminal:
npx gulp compile
ornpx gulp
npx gulp watch
npx gulp init
npx gulp update
Autoprefixer
We use Autoprefixer for maximum browser compatibility. We target the the following browsers. When you compile with the USWDS compiler, we will apply Autoprefixer to all compiled code.
> 2% last 2 versions IE 11 not dead
Updating the USWDS icon sprite
After running either
init
orcopyAssets
, you'll find USWDS images in thepaths.dist.img
directory. Any icon SVG file inusa-icons
diretory within thepaths.dist.img
directory will compile into the icon sprite when running thecompileIcons
function.We'll be updating and improving the icon workflow in subsequent releases.
🚀