![minify files minify files](https://thebroodle.com/wp-content/uploads/2021/03/minify-files.jpg)
Re-running the gulp command in the terminal after every change to your files will become very tiresome very quickly. I'll write about this in a future article. It is possible to have gulp look for multiple files inside a directory and mash them together into a single minified file, but for the sake of simplicity, I wanted to keep this article to a basic use case. Now all that's left to do is add the new, minified files to your project! Just replace any references to styles.css and app.js with and, respectively. You can, of course, change the file and directory names to suit your project. Finished 'default' after 97 msĪnd with that, you should see a new file called in your css directory, and a new file called in your js directory. Your default task will run, and you should see some output similar to this: Using gulpfile ~/GitHub/avoid-the-sock/gulpfile.js Run the following command in your console: gulp parallel (minif圜SS, minifyJS ) Run the task The task will run when you use the gulp command in the terminalĮxports. The two functions will execute asynchronously (in parallel) Makes both functions available as a single default task Saves the new file inside the js directory Looks for a file called app.js inside the js directory Saves the new file inside the css directory Looks for a file called styles.css inside the css directory Then paste the following into that file: // Require the npm modules we needĬleanCSS = require ( "gulp-clean-css" ) , To use gulp, you need to create a file called gulpfile.js and save it at the root of your project. Time to create a file called gulpfile.js! Create your gulpfile Now you can actually go ahead and minify your files. Once you've done this, your package.json file will be updated and a package-lock.json file will also be created. This means they're dependencies for your development environment, but not the production environment your users see.
MINIFY FILES INSTALL
This will install the packages as dev dependencies. To install the packages all together, run the following command: npm i gulp gulp-rename gulp-terser gulp-clean-css -D These are the packages you'll need in order to minify JavaScript and CSS files: Now you need to tell npm to install a few packages for you. Or you can run this command, which will skip all the questions and just use the default values that npm provides: npm init -yĮither way, you'll be left with a shiny new file called package.json.
![minify files minify files](http://mohamedradwan.com/wp-content/uploads/2010/11/12-11-2010-5-05-38-PM-300x180.png)
You can either run the following command, which will guide you through naming the fields: npm init
MINIFY FILES CODE
my-project in this case) and keeps track of information about your project, such as its name, version, author, code dependencies, etc. This is a file that sits in the root of your project (the top-level folder, i.e. Once there, you need to create a package.json file. Navigate to that folder in your terminal window. Let's pretend you're working on a project saved in a folder called my-project. If you already have a package.json file configured, you can skip this step. Next, you'll need to create a package.json file if you haven't already. This will make the package available globally, not just for your current project: npm i gulp-cli -g Then run the following command in your terminal window to install the command-line utility. If you've previously installed gulp globally, run npm rm -global gulp before following these instructions. Once you've done that, you can install the command-line utility.įirst, a quick note as explained in the Quick Start guide for gulp:
MINIFY FILES HOW TO
If you don't have Node.js and npm installed, you'll need to get those first you can learn how to do that in the get npm guide. Install the command-line utility for gulpįirst, you need to open a new terminal window and install the command-line utility for gulp. I couldn't seem to find such a basic tutorial on the web that was explained in simple terms. This encompasses many things, but let's focus on a basic use case for minifying JavaScript and CSS files. Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow.