咕噜咕噜，然后缩小任务 [英] Gulp less and then minify task

问题描述

1. 减少.css文件的格式


2. Minify生成的css文件

这是我的gulp文件：

  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关于咖啡文件
 gulp.start（'compile-less'）; //运行编译任务
}）; 
 
 watch（{
 glob：[' ./*.css'，'！./*。min.css'] 
}，函数（文件）{
 gulp.start（'minify-css'）; //运行编译任务
}）; 
}）; 
 $ b $ gulp.task（'compile-less'，function（）{
 gulp.src（'./*。less'）//文件路径
 .pipe （'（'error'，function（err）{
 console.log（err）; 
}））
 .pipe（gulp.dest（'./'） ）; 
}）; 
 $ b $ gulp.task（'minify-css'，function（）{
 gulp.src（[
'./*.css'，
'！。 /*.min.css'
））
 .pipe（cssmin（）。on（'error'，function（err）{
 console.log（err）; 
 }））
 .pipe（{（后缀：'.min'}））
 .pipe（gulp.dest（'./'））; 
}）
 
 gulp.task（'default'，['watch-less']）; 
  

当我开始时，只有第一步完成。
请帮助我。

解决方案

没有必要经过一段时间，对我来说便利的解决方案是：

  var gulp = require（'gulp'），
 less = require（'gulp-less'），
 cssmin = require（'gulp-cssmin'），
 plumber = require（'gulp-plumber'），
 rename = require（'gulp-rename'）; 
 $ b $ gulp.task（'watch'，function（）{
 gulp.watch（'./ styles / *。less'，['less']）; 
} ）; 
 $ b $ gulp.task（'less'，function（）{
 gulp.src（'./ styles / *。less'）
 .pipe（plumber（））$ 
 .pipe（less（））
 .pipe（gulp.dest（'./ styles /'））
 .pipe（cssmin（））
 .pipe（rename（{ 
后缀：'.min'
}））
 .pipe（gulp.dest（'./ styles'））
 
}）; 
 
 gulp.task（'default'，['less'，'watch']）; 
  

I have to make 2 steps in gulp:

1. Make a .css file form less
2. Minify generated css files

This is my 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']);

When i start it only first step is done. Help me please.

解决方案

There is no needing after time, convinient solution for me was:

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']);

这篇关于咕噜咕噜，然后缩小任务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！