90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
|
|
|
|
## Installation
|
|
|
|
Install package with NPM and add it to your development dependencies:
|
|
|
|
`npm install --save-dev gulp-concat`
|
|
|
|
## Information
|
|
|
|
<table>
|
|
<tr>
|
|
<td>Package</td><td>gulp-concat</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Description</td>
|
|
<td>Concatenates files</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Node Version</td>
|
|
<td>>= 0.10</td>
|
|
</tr>
|
|
</table>
|
|
|
|
## Usage
|
|
|
|
```js
|
|
var concat = require('gulp-concat');
|
|
|
|
gulp.task('scripts', function() {
|
|
return gulp.src('./lib/*.js')
|
|
.pipe(concat('all.js'))
|
|
.pipe(gulp.dest('./dist/'));
|
|
});
|
|
```
|
|
|
|
This will concat files by your operating systems newLine. It will take the base directory from the first file that passes through it.
|
|
|
|
Files will be concatenated in the order that they are specified in the `gulp.src` function. For example, to concat `./lib/file3.js`, `./lib/file1.js` and `./lib/file2.js` in that order, the following code will create a task to do that:
|
|
|
|
```js
|
|
var concat = require('gulp-concat');
|
|
|
|
gulp.task('scripts', function() {
|
|
return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
|
|
.pipe(concat('all.js'))
|
|
.pipe(gulp.dest('./dist/'));
|
|
});
|
|
```
|
|
|
|
To change the newLine simply pass an object as the second argument to concat with newLine being whatever (\r\n if you want to support any OS to look at it)
|
|
|
|
For instance:
|
|
|
|
```js
|
|
.pipe(concat('main.js', {newLine: ';'}))
|
|
```
|
|
|
|
To specify `cwd`, `path` and other [vinyl](https://github.com/wearefractal/vinyl) properties, gulp-concat accepts `Object` as first argument:
|
|
|
|
```js
|
|
var concat = require('gulp-concat');
|
|
|
|
gulp.task('scripts', function() {
|
|
return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
|
|
.pipe(concat({ path: 'new.js', stat: { mode: 0666 }}))
|
|
.pipe(gulp.dest('./dist'));
|
|
});
|
|
```
|
|
|
|
This will concat files into `./dist/new.js`.
|
|
|
|
### Source maps
|
|
|
|
Source maps can be generated by using [gulp-sourcemaps](https://www.npmjs.org/package/gulp-sourcemaps):
|
|
|
|
```js
|
|
var gulp = require('gulp');
|
|
var concat = require('gulp-concat');
|
|
var sourcemaps = require('gulp-sourcemaps');
|
|
|
|
gulp.task('javascript', function() {
|
|
return gulp.src('src/**/*.js')
|
|
.pipe(sourcemaps.init())
|
|
.pipe(concat('all.js'))
|
|
.pipe(sourcemaps.write())
|
|
.pipe(gulp.dest('dist'));
|
|
});
|
|
```
|