Gulp - 更改缩小 CSS 的目的地答案

【问题标题】：Gulp - Change destination of minified CSSGulp - 更改缩小 CSS 的目的地
【发布时间】：2018-07-25 18:21:04
【问题描述】：

我有一个用于 WordPress 的 gulp 文件。它位于主题目录中的一个文件夹中。我唯一的问题是我想在缩小后更改 style.css 文件的目标。我唯一的问题是，当我在“css”任务结束时更改目的地时，它会将所有更改文件放入我想要的新目的地。

有没有一种简单的方法可以只将单个 style.css 文件输出到新的目的地？（期望的目的地是“/assets/css/”

这是我的整个 gulp 文件：

var themename = 'examplethemename';

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    browserSync = require('browser-sync').create(),
    image = require('gulp-image'),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),

    // Only work with new or updated files
    newer = require('gulp-newer'),

    // Name of working theme folder
    root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'js/',
    img = root + 'images/',
    languages = root + 'languages/';


// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'expanded', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root));
});

// Optimize images through gulp-image
gulp.task('images', function() {
    return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
    .pipe(newer(img))
    .pipe(image())
    .pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
    return gulp.src([js + '*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        proxy: 'example.local/',
        port: 8080
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
    gulp.watch(js + '**/*.js', ['javascript']);
    gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});


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

谢谢

【问题讨论】：

我认为您需要在您的 css 任务 (github.com/isaacs/node-glob#options) 中使用忽略选项排除 style.css 文件，然后创建一个单独的任务来正确处理 style.css 文件目录或创建一个任务以在第一个 css 任务运行后将 style.css 文件通过管道传输到正确的目录（此链接将您带到以下位置：github.com/gulpjs/gulp/blob/v3.9.1/docs/…）
谢谢！我要更新我的答案
不客气！

标签： javascript css gulp

【解决方案1】：

感谢 Zac 1 的建议，我是这样完成的：

var themename = 'themename';

var gulp = require('gulp'),
    // Prepare and optimize code etc
    autoprefixer = require('autoprefixer'),
    browserSync = require('browser-sync').create(),
    image = require('gulp-image'),
    jshint = require('gulp-jshint'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    cleanCSS = require('gulp-clean-css'),


    // Only work with new or updated files
    newer = require('gulp-newer'),

    // Name of working theme folder
    root = '../' + themename + '/',
    scss = root + 'sass/',
    js = root + 'js/',
    img = root + 'images/',
    languages = root + 'languages/';


// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'expanded', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root));
});


gulp.task('minify-css', () => {
  return gulp.src(root + 'style.css')
    .pipe(cleanCSS({level: {1: {specialComments: 0}}}, (details) => {
      console.log(`${details.name}: ${details.stats.originalSize}`);
      console.log(`${details.name}: ${details.stats.minifiedSize}`);
    }))
  .pipe(gulp.dest(root + '/assets/css/'));
});

// Optimize images through gulp-image
gulp.task('images', function() {
    return gulp.src(img + 'RAW/**/*.{jpg,JPG,png}')
    .pipe(newer(img))
    .pipe(image())
    .pipe(gulp.dest(img));
});

// JavaScript
gulp.task('javascript', function() {
    return gulp.src([js + '*.js'])
    .pipe(jshint())
    .pipe(jshint.reporter('default'))
    .pipe(gulp.dest(js));
});


// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        proxy: 'example.local/',
        port: 8080
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], ['css']);
    gulp.watch(js + '**/*.js', ['javascript']);
    gulp.watch(img + 'RAW/**/*.{jpg,JPG,png}', ['images']);
    gulp.watch(root + '**/*').on('change', browserSync.reload);
    gulp.watch(root + 'style.css', ['minify-css'])
});


// Default task (runs at initiation: gulp --verbose)
gulp.task('default', ['watch']);

【讨论】：