Source ordering
Another common issue that new Gulp users face is the way in which the files are ordered when they are processed. By default, each file in will be processed in order, based on its filename, unless specified otherwise. So, for example, when you are concatenating your CSS into a single file you will need to make sure that your normalized or reset styles are processed first.
To get around this, you can actually change the filenames of your source files by prepending numbers to them in the order that you would like them to be processed. So, for example, if you need a normalize.css
file to render before an abc.css
file, you can rename those files 1-normalize.css
and 2-abc.css
, respectively.
However, there are better ways to do this, and my personal favorite is to create an array at the beginning of the gulpfile
so you can clearly order your files however you like. It's clean, simple, and easy to maintain.
Take the following code for example:
var cssFiles = ['assets/css/normalize...