You'll see that it contains all lines of code from our source files. In it, you should see a new scripts folder that contains a scripts.js file. Now, check the dist folder in your project. If all goes well, you should see output similar to what is below: Using gulpfile ~/gulp-demo/gulpfile.js Run the following command in Terminal.app to make sure everything is working properly. Finally, stream the resulting files to the st method, to which we pass the location where the new file will live. pipe to stream the source data to the concat() module, to which we pass the name of our newly concatenated file. In this function, use gulp.src to grab the location of your javascript source files. var concat = require('gulp-concat') Ĭreate a gulp task and pass in the name 'scripts' and then a function. Next, require these dependencies at the top of your gulpfile.js.
#Sass minify install#
npm install gulp-concat gulp-rename gulp-uglify -save-dev To do so, the following command in Terminal.app. To achieve the desired results for our project scripts, you will need to install gulp-concat, gulp-rename, and gulp-uglify. My javascript files are very simple and contain just enough code to confirm everything is working properly when we run our task. (If you need help installing Gulp, go back and read Getting Started with Gulp Javascript Task Runner.)įor the purpose of this tutorial I am assuming a project structure that looks like this. With Gulp, we can improve the overall performance of our sites and applications by minifying our javascript to reduce the file size and concatenating our files to reduce the number of file requests. Numerous requests for large files can slow site performance. When building large web applications, you'll find that your app may require LOTS of javascript files. Concatenate & Minify Javascript with Gulp, Improve Site Performance.Getting Started with Gulp Javascript Task Runner.This tutorial is part of a series on Gulp:
0 kommentar(er)
