gulp-assign

gulp-assign

Installation

npm i -D gulp-assign

Usage

└── src/
    ├── css/
    │   ├── lib/
    │   │   ├── a.css
    │   │   └── b.css
    │   ├── a.css
    │   └── b.css
    ├── js/
    │   ├── lib/
    │   │   ├── a.js
    │   │   └── b.js
    │   ├── a.js
    │   └── b.js
    └── index.html

<!-- build:css /css/main.css -->
  <link rel="stylesheet" href="css/a.css" />
  <link rel="stylesheet" href="css/b.css" />
<!-- endbuild -->

<!-- build:js:lib ./js/main.lib.js -->
  <script src="js/lib/a.js"></script>
  <script src="js/lib/b.js"></script>
<!-- endbuild -->
<!-- build:js ./js/main.js -->
  <script src="js/a.js"></script>
  <script src="js/b.js"></script>
<!-- endbuild -->

var assign = require('gulp-assign');

var streamAssignee = function(inputs, output) {
  return gulp.src(inputs, {base: 'src'})
    .pipe(concat(output.relative))
    .pipe(gulp.dest('dist'));
};

var callbackAssignee = function(inputs, output, callback) {
  gulp.src(inputs, {base: 'src'})
    .pipe(concat(output.relative))
    .pipe(gulp.dest('dist'))
    .on('error', callback)
    .on('end', callback);
};

var assignees = {
  css: streamAssignee,
  js: {
    default: streamAssignee,
    lib: callbackAssignee
  }
};

gulp.task('pack', function() {
  return gulp.src('src/**/*.html')
    .pipe(assign(assignees))
    .pipe(gulp.dest('dist'));
});

Here is the results:

└── dist/
    ├── css/
    │   └── main.css
    ├── js/
    │   ├── main.js
    │   └── main.lib.js
    └── index.html

<link rel="stylesheet" href="/css/main.css" />

<script src="./js/main.lib.js"></script>
<script src="./js/main.js"></script>

API

assign(opt)

opt

Type: object

opt.styles

Type: function|object Alias: opt.css|opt.style

If typed as function, it will be replaced with {default: opt.styles}.

......

opt.scripts

Type: function|object Alias: opt.js|opt.script

Working in the same way as opt.styles.