Тask gulp для min.js?

Question

[narkesss]

Не получаеться встроить таск для минимизации js , как правильно реализовать ?

const gulp        = require('gulp');
const browserSync = require('browser-sync').create();
const pug         = require('gulp-pug');
const sass        = require('gulp-sass');
const spritesmith = require('gulp.spritesmith');
const rimraf      = require('rimraf');
const rename      = require('gulp-rename');
const prefix      = require('gulp-autoprefixer');
// const uglify      = require('gulp-uglify');
// const sourcemaps = require('gulp-sourcemaps');

// BROWSER SYNC

gulp.task('server', function() {
    browserSync.init({
        server: {
            port:9000,
            baseDir: "build"
        }
    });
    gulp.watch('build/**/*').on('change', browserSync.reload);
});

// PUG

gulp.task('templates:compile', function buildHTML() {
    return gulp.src('source/template/index.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('build'))
});

//SASS

gulp.task('styles:compile', function () {
    return gulp.src('source/styles/main.scss')
        .pipe(prefix("last 2 version", "> 1%", "ie 8", "ie 7"))
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(rename('main.min.css'))
        .pipe(gulp.dest('build/css'));
});

//SPRITESMITH

gulp.task('sprite', function (cd) {
    const spriteData = gulp.src('source/images/icons/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        imgPath: '../images/sprite.png',
        cssName: 'sprite.scss'
    }));

     spriteData.img.pipe(gulp.dest('build/images/'));
     spriteData.css.pipe(gulp.dest('source/styles/global/'));
     cd();
});

//CLEAN

gulp.task('clean', function del(cd){
    return rimraf('build', cd);
});

//COPY FONTS

gulp.task('copy:fonts', function(){
    return gulp.src('./source/fonts/**/*.*')
        .pipe(gulp.dest('build/fonts'));
});
//COPY IMAGES

gulp.task('copy:images', function(){
    return gulp.src('./source/images/**/*.*')
        .pipe(gulp.dest('build/images'));
});
//COPY

gulp.task('copy', gulp.parallel('copy:fonts', 'copy:images'));

//WATCH

gulp.task('watch', function () {
    gulp.watch('source/template/**/*.pug', gulp.series('templates:compile'));
    gulp.watch('source/styles/**/*.scss', gulp.series('styles:compile'));
    
});

//DEFAULT

gulp.task('default', gulp.series(
    'clean',
    gulp.parallel('templates:compile', 'styles:compile', 'copy'),
    gulp.parallel('watch', 'server')
    )
);

Answer 1

[Владислав Бойченко]

Я делаю так:

gulp.task('scripts-libs', function(){
	return gulp.src([
		'app/libs/jquery/jquery.js',
		'app/libs/**/*.js'
	])
	.pipe(concat('libs.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('app/js'));
});

Соответственно нужны gulp-concat и gulp-uglify.

Comments

[narkesss]

я без канката делал ,файл дабавляесться а вот на изменения не реагирут, я просто не совсем силен в этот таск еще обьявлять нужно где то ?

[Владислав Бойченко]

narkesss, для начала подключите gulp-uglify, и если без конката, то просто выбираете нужные файлы и прогоняете через gulp-uglify:

/* Подключаете uglify */
var uglify = require('gulp-uglify'); 

gulp.task('scripts-libs', function(){
  /* Выбираете все нужные файлы */
  return gulp.src([
    'app/libs/jquery/jquery.js',
    'app/libs/**/*.js'
  ])
  /* Здесь проходит минификация */
  .pipe(uglify())
  /* Здесь ложите, куда хотите */
  .pipe(gulp.dest('app/js'));
});