javascript - Create Gulp tasks to minifyconcat files to package sources from multiples directories into files in their respectiv

admin管理员组

文章数量:1289832

I'm writing an Angular project with the following the structure:

js/
    ponents/
        ponent1/
            ponent1.directive.js
            ponent1.controller.js
            ponent1.factory.js
            ponent1.rest.service.js
        ponent2/
            ponent2.factory.js
            ponent2.rest.service.js
    vendor/
        angular/
        jquery/
    home.js
    page2.js

where the ponents are shared resources and files which reside directly under js/ are packages of required ponents and vendor libs.

What I want to do with gulp is create a task which will stream the files from each ponent directory, watch for changes to trigger ngmin() and uglify(), then concat() those files into a '{ponentDirectoryName}.package.min.js' file while lives in the ponent's directory. The result would look something like this:

js/
    ponents/
        ponent1/
            ponent1.directive.js
            ponent1.controller.js
            ponent1.factory.js
            ponent1.rest.service.js
            ponent1.package.min.js
        ponent2/
            ponent2.factory.js
            ponent2.rest.service.js
            ponent2.package.min.js

Current implementation:

var gulp        = require('gulp');
var $           = require('gulp-load-plugins')({ camelize: true});
var glob        = require('glob');
var StreamQueue = require('streamqueue');

var publicDir = './src/main/webapp/public/';
var jsDir = publicDir + 'js/';
var ponents = jsDir + 'ponents/';

gulp.task('js', function() {
    var ponentsDirectories = glob.sync(ponents + '/*/');
    var queue = new StreamQueue();

    ponentsDirectories.forEach(function(directory) {
        var ponentName = directory.match(/.+\/(.+)\/$/)[1];

        queue.queue(
            gulp.src([directory + '*.js', '!' + directory + '*-package.min.js'])
                .pipe($.ngmin())
                .pipe($.jsmin())
                .pipe($.concat(ponentName + "-package.min.js"))
                .pipe(gulp.dest(directory))
        );
    });

    return queue.done().pipe($.livereload());

});

gulp.task('watch', function() {
    gulp.watch([ponents + '**/*.js', '!' + ponents + '**/*.min.js'], ['js']);
});

gulp.task('default', ['js', 'watch']);

I'm writing an Angular project with the following the structure:

js/
    ponents/
        ponent1/
            ponent1.directive.js
            ponent1.controller.js
            ponent1.factory.js
            ponent1.rest.service.js
        ponent2/
            ponent2.factory.js
            ponent2.rest.service.js
    vendor/
        angular/
        jquery/
    home.js
    page2.js

where the ponents are shared resources and files which reside directly under js/ are packages of required ponents and vendor libs.

What I want to do with gulp is create a task which will stream the files from each ponent directory, watch for changes to trigger ngmin() and uglify(), then concat() those files into a '{ponentDirectoryName}.package.min.js' file while lives in the ponent's directory. The result would look something like this:

js/
    ponents/
        ponent1/
            ponent1.directive.js
            ponent1.controller.js
            ponent1.factory.js
            ponent1.rest.service.js
            ponent1.package.min.js
        ponent2/
            ponent2.factory.js
            ponent2.rest.service.js
            ponent2.package.min.js

Current implementation:

var gulp        = require('gulp');
var $           = require('gulp-load-plugins')({ camelize: true});
var glob        = require('glob');
var StreamQueue = require('streamqueue');

var publicDir = './src/main/webapp/public/';
var jsDir = publicDir + 'js/';
var ponents = jsDir + 'ponents/';

gulp.task('js', function() {
    var ponentsDirectories = glob.sync(ponents + '/*/');
    var queue = new StreamQueue();

    ponentsDirectories.forEach(function(directory) {
        var ponentName = directory.match(/.+\/(.+)\/$/)[1];

        queue.queue(
            gulp.src([directory + '*.js', '!' + directory + '*-package.min.js'])
                .pipe($.ngmin())
                .pipe($.jsmin())
                .pipe($.concat(ponentName + "-package.min.js"))
                .pipe(gulp.dest(directory))
        );
    });

    return queue.done().pipe($.livereload());

});

gulp.task('watch', function() {
    gulp.watch([ponents + '**/*.js', '!' + ponents + '**/*.min.js'], ['js']);
});

gulp.task('default', ['js', 'watch']);

• javascript
• angularjs
• gulp

Share Improve this question Follow edited Mar 19, 2014 at 20:56 SirTophamHatt asked Mar 14, 2014 at 19:36 SirTophamHattSirTophamHatt 1,5811717 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You can use node-glob to get your ponents' names.
To register multiple sources as a single task you can pose streams with streamqueue.

Here's my solution:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var ngmin = require('gulp-ngmin');
var livereload = require('gulp-livereload');
var glob = require('glob');
var StreamQueue = require('streamqueue');

gulp.task('js', function() {

  var ponentsFolders = glob.sync('ponents/*/');
  var queue = new StreamQueue();

  ponentsFolders.forEach(function(folder){
    var ponentName = folder.match(/.+\/(.+)\/$/)[1];
    queue.queue(
      gulp.src([folder + '*.js', '!' + folder + '*.package.min.js'])
          .pipe(ngmin())
          .pipe(uglify())
          .pipe(concat(ponentName + ".package.min.js"))
          .pipe(gulp.dest(folder))
    );
  });

  return queue.pipe(livereload());
});

gulp.task('default', ['js']);

本文标签：