Pipe data from one npm script to another
In an effort to bypass saving temporary build files you can leverage piping and output redirection to streamline your build process. In addition using these technique can speed up your build process.
Instructor: [00:02] 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.
[00:17] 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.
[00:40] 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.
[00:59] 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.
[01:11] 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.
[01:25] 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.
[01:45] 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.
[02:07] 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.
[02:27] Next, let's focus on our JavaScript. We'll create a build:js script. Let's save that. Let's install our dependencies here. We're going to use mustache and uglify-js and install them as dev dependencies.
[02:44] We could go back to our script and provide mustache our data.json file and our index.mustache.js file. The result of that process will pipe that to uglify-js so that it can minify our JavaScript.
[03:01] Then we'll redirect the output to public/index.min.js. We'll save that, open up our terminal. npm run build:js. Our JavaScript will be created and minified.
[03:15] We should find it in our public folder. If we come back over here, sure enough, here's our minified JavaScript. We're good to go.
[03:24] 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 :*.
[03:40] Then we'll make a pre-build script that'll remove the public folder before we build our assets. With all of those in place, we should be able to go to our terminal and type "npm run build" to remove the public folder. Then the HTML, CSS, and JavaScript should all be generated.
[04:00] 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.
[04:19] 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.