^p^‎ > ‎

Gulp

opublikowane: 26 gru 2017, 16:13 przez Piotr Trochymiak   [ zaktualizowane 20 lut 2019, 09:06 ]

    npm init
    npm install gulp --save-dev
    npm  i -D  // install  pakiety w skrócie 
    npm install gulp -g   // będzie globalnie

     
gulp.task('task1', gulp.series('task1-1', function (done) {
   // task 1 code here
    done();
}));

gulp.task('task2', gulp.series('task2-1', function (done) {
   // task 2 code here
    done();
}));

// Similarly Tasks 3 and 4 Code here

gulp.task('main', gulp.series('task1', 'task2', 'task3', 'task4', function (done) {
    done();
}));

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var changed = require('gulp-changed');
var htmlReaplce = require('gulp-html-replace');
var htmlmin = require('gulp-htmlmin');
var del = require('del');
var sequence = require('run-sequence');
var tar = require('gulp-tar');
var gzip = require('gulp-gzip');
var hash = require('gulp-hash-filename');
var scp = require('scp');
var webp = require('gulp-webp');
var imageResize = require('gulp-image-resize')
var clean = require("gulp-clean");

var config = {
cssin: '/LWL/css/**/*.css',
cssout: '/LWL/dist/css',
jsin: '/LWL/js/**/*.js',
jsout: '/LWL/dist/js',
phpin: '/LWL/{footer,header,menu-gora,category,tag}.php',
phpout: '/LWL/dist',
tarin: '/LWL/dist/**/*',
tarout: '/LWL/wylot'
};

var dzie = ((new Date()).getDate());
var mies = ((new Date()).getMonth())+1;
var godz = ((new Date()).getHours());
var minu = ((new Date()).getMinutes());

var d = new Date();
var n = d.getTimezoneOffset();
var timezone = n / -60;
console.log(timezone);


gulp.task('js', function(cb) {
  return gulp.src(config.jsin)
//    .pipe(concat('pep.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest(config.jsout));
});

gulp.task('css', function(cb) {
   return gulp.src(config.cssin)
//    .pipe(concat('style.min.css'))
    .pipe(cleanCSS())
    .pipe(gulp.dest(config.cssout));
});

gulp.task('mini', function(cb) {
  return gulp.src(config.phpin)
    .pipe(htmlmin({
      collapseWhitespace: true,
      sortAttributes: true,
      sortClassName: true
      }))
    .pipe(gulp.dest(config.phpout));
});

//====================== wylot ================================

gulp.task('tar', () =>
    gulp.src(config.tarin)
        .pipe(tar('wylot-pep-'+dzie+mies+'-'+godz+'-'+minu+'.tar'))
        .pipe(gzip())
        .pipe(gulp.dest(config.tarout))
);

gulp.task('clean', function (cb) {
    return gulp.src('/dist')
        .pipe(clean({force: true}));
});

gulp.task('build', function() {
          sequence(['js','css','mini'],'tar','clean');
        });

gulp.task('scp', function() {
        scp.send({
        file: '/wylot/*.tar.gz', 
        user: 'user',   
        host: 'server',  
        port: '2K',         
        path: '~/katalog/'           
    });
});

// ======================== obrazki =======================

var obrazki = {
     imgin: '/LWL/2/*.{jpg,jpeg,png,gif}',
     imgout: '/LWL/22',
       };

gulp.task('img', function() {
  return gulp.src(obrazki.imgin)
    .pipe(changed(obrazki.imgout))
    .pipe(imagemin())
    .pipe(gulp.dest(obrazki.imgout));
});

gulp.task('resize', function () {
  gulp.src(obrazki.imgin)
    .pipe(imageResize({
       width : 1200,
      //height : 100,
      //crop : true,    //przycinanie
      interlace: true,  //przeplot
      noProfile: true,  //metadane
      cover: true,      //pilnuje-proporcji
      upscale : true    //up-skalowanie
    }))
    .pipe(gulp.dest(obrazki.imgout));
});

gulp.task('webp', function () {
    return gulp.src(obrazki.imgin)
        .pipe(webp())
        .pipe(gulp.dest(obrazki.imgout));
});


gulp.task('gfx', function() {
          sequence(['img','resize'],'webp');
        });


@aquafadas/gulp-php-minify, 
browser-sync,
del,
gulp,
gulp-autoprefixer,
gulp-changed,
gulp-clean,
gulp-clean-css,
gulp-concat,
gulp-gzip,
gulp-hash-filename,
gulp-html-replace,
gulp-htmlmin,
gulp-image-resize,
gulp-imagemin,
gulp-sass,
gulp-sourcemaps,
gulp-tar,
gulp-uglify,
gulp-version-filename,
gulp-webp,
run-sequence,
imagemin-webp,


npm install @aquafadas/gulp-php-minify browser-sync del gulp gulp-autoprefixer gulp-changed gulp-clean gulp-clean-css gulp-concat gulp-gzip gulp-hash-filename gulp-html-replace gulp-htmlmin gulp-image-resize gulp-imagemin gulp-sass gulp-sourcemaps gulp-tar gulp-uglify gulp-version-filename gulp-webp run-sequence imagemin-webp -g

npm i -D gulp-sourcemaps
 npm i -D gulp-autoprefixer
 npm i -D gulp-concat
 npm i -D gulp-clean-css
 npm i -D gulp-uglify
 npm i -D gulp-imagemin
 npm i -D gulp-changed
 npm i -D gulp-html-replace
 npm i -D gulp-htmlmin
 npm i -D del
 npm i -D run-sequenc
 npm i -D gulp-tar
 npm i -D gulp-gzip
 npm i -D gulp-hash-filename
 npm i -D scp
 npm i -D gulp-webp
 npm i -D gulp-image-resize
 npm i -D gulp-clean


https://github.com/fourkitchens/frontend-perf/blob/master/gulpfile.js#L90-L114

convert input.jpg -colors 16 -quality 50 output.jpg



var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var imageResize = require('gulp-image-resize');
var imageminMozjpeg = require('imagemin-mozjpeg');
//var imageminGuetzli = require('imagemin-guetzli');
//var sequence = require('run-sequence');
var sequence = require('gulp-sequence')
// ======================== obrazki =======================

var obrazki = {
     imgin: '/home/olo/Pulpit/LWL/00/*.{jpg,jpeg,png,gif,JPG}',
     imgout: '/home/olo/Pulpit/LWL/00/1',
     imgin2: '/home/olo/Pulpit/LWL/00/0/*.{jpg,jpeg,png,gif}',
     mjpgIn: '/home/olo/Pulpit/LWL/00/1/*.{jpg,jpeg,png,gif,JPG}',
     mjpgOut: '/home/olo/Pulpit/LWL/00/0/',
     };

gulp.task('resize', function (done) {
  gulp.src(obrazki.imgin)
    .pipe(imageResize({
       width : 800,
      //height : 100,
      //crop : true,    //przycinanie
      //quality: 46,    
      progressive: true,
      interlace: true,  //przeplot
      noProfile: true,  //metadane
      cover: true,      //pilnuje-proporcji
      upscale : true    //up-skalowanie
    }))
    .pipe(gulp.dest(obrazki.imgout));
    done();
});

gulp.task('mjpg', function (done ) {
    gulp.src(obrazki.mjpgIn).pipe(imagemin([imageminMozjpeg({ quality: 46 })])).pipe(gulp.dest(obrazki.mjpgOut))
//    gulp.src(obrazki.mjpgIn).pipe(imagemin([imageminGuetzli({ quality: 46 })])).pipe(gulp.dest(obrazki.mjpgOut))

    done();
});

gulp.task('gfx', gulp.series(['resize'],'mjpg'), function() {

//    gulp.task('gfx',['resize'], function() {
    // nic nie dzila :( 
          //gulp.series(['resize']);
//   gulp.watch('/home/olo/Pulpit/LWL/00/*.{jpg,jpeg,png,gif,JPG}','resize');
//   gulp.watch('/home/olo/Pulpit/LWL/00/0/*.{jpg,jpeg,png,gif,JPG}','mjpg');

// gulp.watch('resize').gulp.start('mjpg');
//   done();
        });

/*
gulp.task('gfx', sequence(['resize'],'mjpg'))
gulp.task('mozjpeg', () =>
    gulp.src('src/*.jpg')
    .pipe(imagemin([imageminMozjpeg({
        quality: 85
    })]))
    .pipe(gulp.dest('dist'))
);

gulp.task('img', function() {
  return gulp.src(obrazki.imgin)
    .pipe(changed(obrazki.imgin))
    .pipe(imagemin())
    .pipe(gulp.dest(obrazki.imgin));
});
*/



ċ
Piotr Trochymiak,
26 gru 2017, 16:25
Comments