it-swarm.com.ru

Глотай меньше, а затем минимизируй задачу

Я должен сделать 2 шага глотком:

  1. Сделайте форму файла .css меньше
  2. Сократить сгенерированные CSS-файлы

Это мой gulpfile:

var gulp = require('gulp'),
    watch = require("gulp-watch"),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    rename = require('gulp-rename');

gulp.task('watch-less', function () {
    watch({glob: './*.less'}, function (files) { // watch any changes on coffee files
        gulp.start('compile-less'); // run the compile task
    });

    watch({
        glob: ['./*.css', '!./*.min.css']
    }, function(files) {
        gulp.start('minify-css'); // run the compile task
    });
});

gulp.task('compile-less', function () {
    gulp.src('./*.less') // path to your file
    .pipe(less().on('error', function(err) {
        console.log(err);
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('minify-css', function() {
    gulp.src([
        './*.css',
        '!./*.min.css'
    ])
    .pipe(cssmin().on('error', function(err) {
        console.log(err);
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./'));
})

gulp.task('default', ['watch-less']);

Когда я начинаю это, только первый шаг сделан ... Помогите мне, пожалуйста.

9
JAYBEkster

Там нет необходимости со временем, удобное решение для меня было:

var gulp = require('gulp'),
    less = require('gulp-less'),
    cssmin = require('gulp-cssmin'),
    plumber = require('gulp-plumber'),
    rename = require('gulp-rename');

gulp.task('watch', function () {
    gulp.watch('./styles/*.less', ['less']);
});

gulp.task('less', function () {
    gulp.src('./styles/*.less')
        .pipe(plumber())
        .pipe(less())
        .pipe(gulp.dest('./styles/'))
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./styles'))

});

gulp.task('default', ['less', 'watch']);
8
JAYBEkster

Вы должны иметь в виду, что с gulp вы можете просто связывать операции по шаблону glob.

Не совсем уверен, зачем вам нужен gulp.watch, когда вы можете использовать встроенный наблюдатель, этот плагин полезен в хитрых ситуациях, и это, похоже, не так, но вы можете придерживаться его, если вы действительно хотите.

Не забудьте return ваш поток, чтобы gulp знал, когда задача завершена.

Я также обычно обертываю все свои watchers в один watch task, не нужно их разделять.

Для меня ваш gulpfile должен выглядеть так:

var gulp = require('gulp'),
    less = require('gulp-less'),
  cssmin = require('gulp-cssmin'),
  rename = require('gulp-rename');

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

gulp.task('less', function () {

  return gulp.src('./*.less')
    .pipe(less().on('error', function (err) {
      console.log(err);
    }))
    .pipe(cssmin().on('error', function(err) {
      console.log(err);
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./'));

});

gulp.task('default', ['less', 'watch']);
18
Balthazar

Лучше всего было бы добавить gulp.watch в gulp.task по умолчанию, и, если вам требуется синхронизация с браузером, он перезагрузится, когда вы внесете какие-либо изменения в просматриваемые папки, как показано ниже: 

var gulp = require('gulp'),
  less = require('gulp-less'),
  cssmin = require('gulp-cssmin'),
  rename = require('gulp-rename'),
  browser = require('browser-sync');

gulp.task('less', function() {
  return gulp.src('./*.less')
    .pipe(less().on('error', function(err) {
      console.log(err);
    }))
    .pipe(cssmin().on('error', function(err) {
      console.log(err);
    }))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./'));
});

gulp.task('server', function() {
  browser({
    server: {
      baseDir: './'
    }
  });
});

gulp.task('default', ['less', 'server'], function() {
  gulp.watch('./*.less', ['less', browser.reload]);
});

2
MelissaMMDP

Я так и сделал с sass. Вроде того же с меньшими затратами.

Разница с предыдущими ответами в том, что я хотел сделать еще один шаг:

  1. Получить дерзость
  2. Преобразуйте его в CSS и создайте файл
  3. Получить этот файл и минимизировать его.

Таким образом, структура будет выглядеть так:

test.scss
  test.css
    test.min.css
var gulp = require("gulp"),    
  sass = require("gulp-sass"),
  rename = require("gulp-rename");


var paths = {
  webroot: "./wwwroot/"
};

paths.scss = paths.webroot + "css/**/*.scss";

gulp.task('sass', function() {
  gulp.src(paths.scss)
    .pipe(sass())
    .pipe(gulp.dest(paths.webroot + "css"))
    .pipe(cssmin())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.webroot + "css"));
});

Добавлен новый ответ, если кто-то хочет то же самое, что и я.

0
Sanchitos