Search code examples
gulpgulp-watchgulp-uglify

gulp-uglify doesn`t work


I want task 'js' takes .js(& not .min.js) files in directory, uglify that & put them in the same directory with suffix: '.min', but it doesn`t work with many files in directory, my task:

gulp.task('js', function(cb) {
    pump([
            gulp.src(['js/*.js', '!js/*.min.js']),
            uglify(),
            rename({suffix: '.min'}),
            gulp.dest('js/signup/' + pathDist)
        ],
            cb
        );
 });

& my 'watch' task:

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

gulpfile.js:

var gulp            = require('gulp'), // Подключаем Gulp
    cssnano         = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    concat          = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
    rename          = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
    uglify          = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
    del             = require('del'), // Подключаем библиотеку для удаления файлов и папок
    imagemin        = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant        = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    autoprefixer    = require('gulp-autoprefixer'), // Подключаем библиотеку для автоматического добавления префиксов
    cache           = require('gulp-cache'), // Подключаем библиотеку кеширования
    svgmin          = require('gulp-svgmin'), //Подключаем svgmin
    open            = require('gulp-open'), // Подключаем библиотеку открытия файлов
    bulkSass        = require('gulp-sass-bulk-import'), // импорт путей в Sass
    pump            = require('pump'),
    sass            = require('gulp-sass'); //Подключаем Sass пакет

package.json:

"dependencies": {
    "del": "^2.2.0",
    "pump": "^1.0.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-cache": "^0.4.5",
    "gulp-concat": "^2.6.0",
    "gulp-cssnano": "^2.1.2",
    "gulp-imagemin": "^3.0.3",
    "gulp-open": "^2.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.2.0",
    "gulp-sass-bulk-import": "^1.0.1",
    "gulp-svgmin": "^1.2.2",
    "gulp-uglifyjs": "^0.6.2",
    "imagemin-pngquant": "^5.0.0"
  }

directory has 5 files .js, 5 files .min.js & 1 .php; Task takes the first file .js in directory, work with it & stops... How can i work with many files in directory?


Solution

  • The trouble is gulp-uglifyjs uglifies and automatically minifies - so all your js files are being processed, but only one (concatenated) file is output. The one generated file gets the same name as the first source file, so it looks at first like only the first file has been processed.

    For this reason, gulp-uglifyjs has been deprecated: "This plugin has been blacklisted as it relies on Uglify to concat the files instead of using gulp-concat, which breaks the 'It should do one thing' paradigm."

    gulp-uglifyjs does work. But if you want to make sure the uglified files are output separately, use gulp-uglify. I bet you already know how to do this, but I'll explain in case it helps other people

    1. via the command line, change your package.json so you're using gulp-uglify:
    $ cd your-main-project-directory
    $ npm uninstall -S gulp-uglifyjs
    $ npm install -S gulp-uglify
    
    1. in your gulpfile.js, define the "uglify" var as uglify = require('gulp-uglify') instead of uglify = require('gulp-uglifyjs')