Instructor: Let's add some scripts to build our site. First, we'll create a build:html script. Before we create the script, let's install the dependency we'll need for this. From the terminal, we'll npm i pug-cli and make it a dev dependency.
We'll come back to our script and use the pug-cli to process our template. We'll type in "pug." We'll need to pass in data.json as our input and index.pug as our template. data.json has file size information for all versions of React. Then we'll provide an output directory.
We can save our code and run it in the terminal. All we have to do is npm run build:html. If we go to our public folder, we'll see that we have a build version of our index.html page.
Let's add a script for our CSS. This time, we'll introduce a new concept of piping data from one process to another. Before we get too far, let's install our necessary dependencies.
For our CSS script, we'll need sass, postcss, and cssmin. We can install those with npm install node-sass nodecss-cli cssmin and make them all dev dependencies.
We'll go back to our script. We can ask node-sass to compile our source-indexed SCSS file. Then we'll use a pipe character to take the output from sass and use it as the input to our next program, which is postcss.
Then we'll pass it a config file telling postcss to run Autoprefixer on our CSS, which adds any necessary vendor prefixes. Then we'll pipe those results to cssmin that will minify our CSS. Finally, we'll output the results from all those processes with > to public/index.min.css.
If we save and go to the terminal, we could run npm run build:css. It'll generate a new CSS file for us in the public folder. We could go and look. There it is. We could open it up. There's our minified content.
Before we finish, let's create two more scripts, real quick. We'll create a build script. Its purpose is to run all of our subscripts. We'll use npm-run-all. We'll say, "Build and run all of the subscripts," so :*.
Let's verify this is true by going to the public folder, listing out our files. Then we can kick up a quick server to verify our results. We'll type in "localhost:8080." Yes, this is the website we wanted to create.
It's important to note that whatever cli you're piping results to needs to be able to support input from standard input, like postcss or cssmin or uglify-js, for example.