8-800-550-67-94

Минификация css, js и сжатие изображений с помощью Gulp

Так выглядит мой файл gulpfile.js в проекте на Laravel

var gulp = require('gulp');
const image = require('gulp-image');
var imageResize = require('gulp-image-resize');
var csso = require('gulp-csso');
var concatCss = require('gulp-concat-css');
const compiler = require('google-closure-compiler-js').gulp();


/*********************************************
* Работа с изображениями
***********************************************/
 
gulp.task('image', function () {
  gulp.src('public/img/**/*')
    .pipe(image())
    .pipe(gulp.dest('public/1/'));
});


gulp.task('resize', function () {
  gulp.src('public/1/**/*')
    .pipe(imageResize({
      width : 1000,
      height : 850
    }))
    .pipe(gulp.dest('public/2/'));
});

/*********************************************
* Объединение и минимизация CSS
***********************************************/

gulp.task('concat', function () {
  return gulp.src('public/css/dev/**/*.css')
    .pipe(concatCss("main.min.css"))
    .pipe(gulp.dest('public/css/concat/'));
});

gulp.task('csso', function () {
    return gulp.src('public/css/concat/main.min.css')
        .pipe(csso())
        .pipe(gulp.dest('public/css/'));
});

/*********************************************
* Объединение и минимизация JS
***********************************************/

gulp.task('goog', function() {
  // select your JS code here
  return gulp.src('public/js/dev/**/*.js', {base: './'})
      .pipe(compiler({
          compilation_level: 'SIMPLE',
          warning_level: 'DEFAULT',
          output_wrapper: '(function(){\n%output%\n}).call(this)',
          js_output_file: 'main.min.js',  // outputs single file
          create_source_map: true
        }))
      .pipe(gulp.dest('public/js/'));
});

/*********************************************
 * Наблюдения за изменениями файлов
 ***********************************************/

gulp.task('watch', function() {
    gulp.watch('public/css/dev/**/*.css', ['concat']);
    gulp.watch('public/css/concat/main.min.css', ['csso']);
});

А вот так package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "google-closure-compiler-js": "^20161024.0.0",
    "gulp": "^3.9.1",
    "gulp-concat-css": "^2.3.0",
    "gulp-csso": "^2.0.0",
    "gulp-image": "^2.7.2",
    "gulp-image-resize": "^0.10.0"
  }
}

Чтобы все это дело заработало в командной строке PhpStorm пишем

npm install
Цена на 17 июля 2018 г.
  • Москва - 30 000 р.
  • Несколько регионов - 50 000 р.