brenmcnamara / starterkit-web Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
For this project, you will implement watching for less changes. The feature works as follows:
From the command line, you should be able to run: babel-node buildScripts/buildLess --watch
and start a process that will recompile when less files are added, removed, or changed.
Setup
section of the README.md
filebabel-node
command globally
npm install -g babel-cli
which babel-node
Fork
. Forking a repo will create a clone of it in your own set of repositories. You can make changes to your local repo and once you are done making those changes you can request that they be added to the root repogit remote add upstream <link to Brendan's copy of repo>
git checkout -b less-watch
removeFile
functionbuildLess.js
named Utility Functions
readFile
and writeFile
. They both delegate to the native fs
module, but because this module doesn't use promises, they wrap the callback inside a promise and return the promise, which completes when the operations are successful.removeFile
function that takes the name of the file to remove and returns a promise which completes when the file has been deleted.fs.unlink
method to remove the file. Here is an example of how to use itreadFile
as an example of how to implement this method. Note that the promise will resolve with no arguments.chokidar
which makes listening for file changes simple. I have implemented a script in the repo named howToWatch.js
that demos how to use chokidar to watch for file changes.
babel-node howToWatch.js
from the root of the repo, then make some changes to the less directory to see what prints on the screenchange
and add
events(1) Output to the console that the name of the file that has changed / added (in blue)
(2) Compile the less file using compileLessAndWriteToCSSFile
(3) If the compilation succeeds, output to the console that compilation was successful and the name of the file (in green)
(4) If the compilation fails, output the name of the file that failed compilation (in red)
unlink
events(1) Log that a less file was deleted (in blue)
(2) Get the name of the css and css map files that correspond to the deleted file. Do this by using the methods:
Stylesheets.getDistCSSFileForLessFile(filename)
Stylesheets.getDistCSSMapFileForLessFile(filename)
removeFile
function you created on both of these files.package.json
, add an entry under scripts
with key: "build-watch:less". The value of that script is the command that will run buildLess with the --watch commandbabel-node buildScripts.js --watch
and make changes to the directory of less files to see if it is behaving as expecteddist/css
npm run build-watch:less
howToWatch.js
git commit --amend
to rewrite the messagegit push origin less-watch
(1) Adding a directory into the src/less directory. Adding a directory occurs with the addDir
event, which you will not ignore.
(2) Adding a file that does not contain the .less
extension. This case you can assume will not happen.
(3) Someone saves a less file that has compilation errors. This will happen all the time since as you make changes to less files, it is possible that you make intermediate save on invalid content. In this case, the error should show, but we should not be throwing any errors so that the process can continue running and we can recompile as soon as the less becomes valid.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.