angular gulp-如何根据每个src文件夹拆分dist文件夹中的js文件

Question

i'm using gulp-angular for my projet and my problem is that i don't have enought experience with node and gulp to modify the default scripts task.

I want to be able to generate for each folder of my app to create an optimized js file who contains all the others js files of this specific folder and repeat this process for each folder. something like that

here's the default file where almost everything is done: ** build.js **

'use strict';

var gulp = require('gulp');

var $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});

module.exports = function(options) {
  gulp.task('partials', function () {
    return gulp.src([
      options.src + '/app/**/*.html',
      options.tmp + '/serve/app/**/*.html'
    ])
      .pipe($.minifyHtml({
        empty: true,
        spare: true,
        quotes: true
      }))
      .pipe($.angularTemplatecache('templateCacheHtml.js', {
        module: 'gulpTest',
        root: 'app'
      }))
      .pipe(gulp.dest(options.tmp + '/partials/'));
  });

  gulp.task('html', ['inject', 'partials'], function () {
    var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
    var partialsInjectOptions = {
      starttag: '<!-- inject:partials -->',
      ignorePath: options.tmp + '/partials',
      addRootSlash: false
    };

    var htmlFilter = $.filter('*.html');
    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');
    var assets;

    return gulp.src(options.tmp + '/serve/*.html')
      .pipe($.inject(partialsInjectFile, partialsInjectOptions))
      .pipe(assets = $.useref.assets())
      .pipe($.rev())
      .pipe(jsFilter)
      .pipe($.ngAnnotate())
      .pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
      .pipe(jsFilter.restore())
      .pipe(cssFilter)
      .pipe($.csso())
      .pipe(cssFilter.restore())
      .pipe(assets.restore())
      .pipe($.useref())
      .pipe($.revReplace())
      .pipe(htmlFilter)
      .pipe($.minifyHtml({
        empty: true,
        spare: true,
        quotes: true,
        conditionals: true
      }))
      .pipe(htmlFilter.restore())
      .pipe(gulp.dest(options.dist + '/'))
      .pipe($.size({ title: options.dist + '/', showFiles: true }));
  });

  // Only applies for fonts from bower dependencies
  // Custom fonts are handled by the "other" task
  gulp.task('fonts', function () {
    return gulp.src($.mainBowerFiles())
      .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
      .pipe($.flatten())
      .pipe(gulp.dest(options.dist + '/fonts/'));
  });

  gulp.task('other', function () {
    return gulp.src([
      options.src + '/**/*',
      '!' + options.src + '/**/*.{html,css,js}'
    ])
      .pipe(gulp.dest(options.dist + '/'));
  });

  gulp.task('clean', function (done) {
    $.del([options.dist + '/', options.tmp + '/'], done);
  });

  gulp.task('build', ['html', 'fonts', 'other']);
};

Once we run the cmd :

gulp build

All the html, css, js etc... files are minified, uglyfied,concatenated etc... and put in a dist folder with this structure:

──  dist/
│   │   ├──  styles/
│   │   │   │   ├──  app-e4a4643d.css
│   │   │   │   └──  vendor-2183d05f.css
│   │   ├──  scripts/
│   │   │   ├──  app-078d1fc3.js
│   │   │   ├──  vendor-b58797da.js
│   ├──  404.html
│   ├──  favico.ico
│   └──  index.html

Also, i don't understant how the names of the optimized files are generated.

So to recap, i want to put in the dist/scripts folder an amount of javascript files equals to the amount of the existing views in the app and rename them as i wish...

Is there someone who can explain me what i shoud do?

Answer 1

Start simple, first gulp two css files together to learn how it works step by step

1. Create a gulp task and name it something like 'css'

   gulp.task('css', function(){ //code goes here })

2. Create an array of the files you want to concatenate, using *.filetype to include everything in a directory

   gulp.src(['filename1','filename2','every/css/file/inThis/dir/*.css])

3. Concatenate the result, which creates a main.css file in your public dir from the concatenated and compiled assets

   .pipe(concat('main.css')) .pipe(gulp.dest('public/css/'));

4. Now in terminal run gulp css

5. All together below

   gulp.task('css', function () { gulp.src([ './bower_components/angular-material/angular-material.css', './assets/css/*.css' ]) .pipe(concat('main.css')) .pipe(gulp.dest('public/css/')); });

Also last but not least if you want to try a little challenge, try compiling sass, I use node-bourbon

Answer 2

Take a look at this gulpfile.js from the project template angularcoffee-boilerplate for Angular and Gulp development.

.js and .coffee files are concatenated to one file with the following command:

var obj = gulp.src(['script1.coffee','script2.coffee')
    .pipe(sourcemaps.init())
    .pipe(coffee({ bare: false, header: false }))
    .pipe(addsrc(['script1.js','script2.js'));

if (options.minify)
    obj = obj.pipe(uglify());

return obj
  .pipe(concat('all.min.js'))
  .pipe(sourcemaps.write('maps'))
  .pipe(gulp.dest(destinationpaths.js))
  .on('error', function (error) {
        console.error('' + error);
  })