I
I
IvanN7772016-04-12 12:20:53
gulp.js
IvanN777, 2016-04-12 12:20:53

With gulp, js minification from vendor bower doesn't work after build, what's wrong?

Decided to use Gulp
Collected a task for him

var
  gulp = require('gulp'),
  concat = require('gulp-concat'),
  gulpFilter = require('gulp-filter');
  jsmin = require('gulp-jsmin');
  cssmin = require('gulp-cssmin');
  order = require('gulp-order');

gulp.task('minify_js', function () {
    
  var vendors = [ 'vendor/jquery/dist/jquery.js',
      'vendor/angular/angular.js',
      'vendor/angular-resource/angular-resource.js',
      'vendor/foundation/js/foundation.js',
      'vendor/foundation-datepicker/js/foundation-datepicker.js'];
  
  var filterJS = gulpFilter(['**/*.js', '!**/*min.js'] , { restore: true });
  console.log(JSON.stringify(vendors));
   
  var files = vendors;

  return gulp.src(files)
     .pipe(filterJS)
     .pipe(order(files))
     .pipe(concat('vendor.min.js'))
     .pipe(jsmin())
     .pipe(gulp.dest('public/js'))
  ;
});

The task works fine, however, when a minified file is connected, the
script stops working instead of such calls.
changing it
<script src="../vendor/jquery/dist/jquery.js"></script>
      <script src="../vendor/angular/angular.js"></script>
      <script src="../vendor/angular-resource/angular-resource.js"></script> 
      <script src="../vendor/foundation/js/foundation.js"></script>
      <script src="../vendor/foundation-datepicker/js/foundation-datepicker.js"></script>

There is a
<script src="public/js/vendor.min.js"></script>
file for this, it seems that they are not combined like that, while I imagine it rather poorly.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
sergey, 2016-04-12
@IvanN777

To work in gulp with bower, there is a very useful gulp-main-bower-files plugin, everything is simple and you don’t need these crutches
Example:

gulp.task('js:vendor', function() {
    gulp.src(mainBowerFiles({
          "overrides": {
              "jquery": {
                  "main": "./dist/jquery.min.js"
              },

              "magnific-popup": {
                  "main": "./dist/jquery.magnific-popup.min.js"
              },

              "slick-carousel": {
                  "main": "./slick/slick.min.js"
              },

              "jquery.maskedinput": {
                  "main": "./dist/jquery.maskedinput.min.js"
              }
          }
  }))
      .pipe(jsFilter)
      .pipe(concat('vendor.js'))
      .pipe(gulpIf(env === 'dev', uglify()))
      .pipe(gulp.dest(outputDir + 'js'))
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question