Скачать с ютуб Introduction to the uglify-js Node.js module в хорошем качестве

Introduction to the uglify-js Node.js module

https://blog.kevinchisholm.com/javasc... In this video, I’ll provide a brief introduction to the uglify-js Node module. If you’d like to follow along with the code samples, please clone this github repo. Let’s first look at the files we’re going to minify. So over here on the root, we have three files: file-1.js, file-2.js, and file-3.js. These files contain just arbitrary JavaScript. But the purpose of them is to give us three JavaScript files that we want to minify and combine together into one. So this array, called days has the seven days of the week, and in file-2.js we have the twelve months of the year, and in file-3.js, we have just a bunch of years. But in each case, we’re taking advantage of space. We’re laying things out in a way that’s human readable, or I should say, a way that humans like to read things like code. We could have done something like this; we could have taken the… reduced as much space as possible, but we don’t like to see thing like that. We like things laid out in a way that’s easier on our eyes. So just bear in mind, that kind of the purpose of these three files is to present JavaScript that is laid out in the human readable way but takes advantage of space. And we’re going to minify these files. So next, let’s look at this file uglify.js. There’s three variables being created here. The first one, fs, is a reference to the file system module. The second variable, uglify.js is a reference to the require module. The third variable, result, is where we store the result of our minification. So we’re calling the minify method of the uglify.js a module, and we’re passing it an array. That array happens to have one element. It’s a path to the final file-1.js. It’s a relative path, because that file’s in the same folder as our JavaScript… this file-1.js. If it was in a subfolder called data we’d see data/file-1.js here. So just a relative path here. So we’re passing it the name of this one file, it’s an array, and the minify method minifies that file and stores that work in here in this result object. And then we’re going to output that to the console. So we’re outputting result.code. Just note the result object has a code property, and the code property is the actual text that has our minification. Next, we’re creating a file and we’re calling the right file method of the fs module. So the first argument is the path to the file we’re creating. So output.min.js will be created in the same folder that we’re in and if it exists, we’re going to overwrite it. The second argument is the content of that file, what goes in output.min.js. And we’re going to put the code property of the result object. So it’s going to be the result of our minification. That’s what’s going to go in the file. And the third argument here is callback. We first check to see if there was an error. If there was, we output it, and if there wasn’t, we just out a message saying the file was successfully saved. So let’s see this in action. I’m going to open up a terminal, and also open up the folder so I can see the result of our command. So I’m going to type this command: node uglify.js and we see down here that a file called output.min.js was created. And also, we saw this console message which was the result of our minification, and this console message file was successfully saved, which we saw up here. So let’s take a look at output.min.js. Now this file is the minified file and in this case looks very much like file-1.js. The only difference is file-1.js is a source file. We took advantage of space. We had things kind of laid out. We had a space between the word days and the = sign, same between =s and the opening bracket for the array, and then each word was on its own line. In the output.min.js there’s no such space. Every possible space has been removed. We can’t remove this space because we have to have var days to take advantage of our key word, but then every possible space that existed has been removed. So we took our source file and we minified it, or uglified it. Let’s take a look at uglify-alt.js. There’s almost no difference between these two files. In fact if you toggle them back and forth, you’ll see that the only difference here is that there’s three elements in this array. So we’re calling the minify method of the uglify.js module but we’re passing an array of three elements. And those three elements are file-1, file-2,and file-3.js. So we’re going to take three JavaScript files, combine them, and minify them. And the rest is the same. So let’s see what happens when we run that. I’m going to go back to my console, and run the command nodes uglify-all.js and then we get our console log messages.... (very sorry: the remaining transcription is missing due to YouTube's maximum text limit)