gulp - Concatenating Files with Gulp - gulp sass - gulp tutorial - learn gulp
- Gulp on its own doesn’t do a lot. We need to install plugins and add tasks to the gulpfile to put Gulp into action.
- Take 3 specific javascript files, concatenate them, then save the result to a file (concat.js)
- Take this concatenated file and uglify/minify it, then save the result to another file (uglify.js)
learn gulp tutorial - gulp concateneting files - gulp example
Below is the code that we used in the gulpfile.js
- However, the uglify operation doesn't seem to be working, or the file isn't generated for some reason.
- Another way:
- To concatenate files we’ll need the gulp-concat plugin; to install it run this from the command line:-
- Again, if you check your package.json file you should see a new line referencing the newly installed plugin:-
- Now we need to add a task to the gulpfile that will instruct Gulp to concatenate some files. Let’s concatenate the project’s JavaScript files:-
- What’s happening here is we’re including the gulp-concat plugin and naming it with the variable concat. We then define the task using gulp.task, naming it ‘scripts’.
- The task involves three processes:-
- We grab the files we want to concatenate using gulp.src (any file with the extension .js in the directory src/js/.
- We then concatenate these files as main.js.
- Finally we tell Gulp where to put main.js, in this case the directory build/js.
- The default task tells Gulp what tasks to call when it’s run, for now that’s just the scripts task. To run Gulp just run:-
- Hopefully if everything’s gone right main.js will have been created in build/js and will be a concatenation of all the JS files.
- If you need to concatenate files in a particular order, then you can always pass an array to gulp.src. For example:-