@IvanN777

При gulp минификация js из vendor bower, после сборки не работает, что не так?

Решил использовать Gulp
Собрал для него задачу
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'))
  ;
});

Задача отрабатывает нормально, однако при подключении минифицированного файла, взамен таким вызовам
скрипт работать перестает.

Меняю это
<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>

На это
<script src="public/js/vendor.min.js"></script>
Файл есть, похоже так их не объединяют, пока я довольно скудно это представляю.
  • Вопрос задан
  • 560 просмотров
Решения вопроса 1
zorro76
@zorro76
Для работы в gulp с bower есть очень полезный плагин gulp-main-bower-files все просто и не надо этих костылей
Пример:
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'))
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы