Question

我的目标是将一些CSS和JS文件以及一个HTML文件编译并缩小为一个新的HTML文件，该文件应该具有这种结构：

<script>
... compiled JS files ...
</script>

<style>
... minified CSS files ... 
</style>

<html file>

这是我的文件结构：

这是我的gulpfile：

const gulp = require('gulp');
const plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var csslint = require('gulp-csslint');
var cssComb = require('gulp-csscomb');
var cleanCss = require('gulp-clean-css');
var jshint = require('gulp-jshint'); // removed
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var minifyHtml = require('gulp-minify-html');
const babel = require('gulp-babel');
const inject = require('gulp-inject-string');
const gulpMerge = require('gulp-merge');
const del = require('del');
const runSequence = require('gulp-sequence');

gulp.task('clean', function () {
    return del([
        'dist/**/*',
    ]);
});

gulp.task('css', function () {
    gulp.src(['src/**/*.css'])
        .pipe(plumber())
        .pipe(cssComb())
        .pipe(csslint())
        .pipe(csslint.formatter())
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest('dist/'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cleanCss())
        .pipe(gulp.dest('dist/'))
});

gulp.task('js', function () {
    gulp.src(['src/js/**/*.js'])
        .pipe(concat('bundle.js'))
        .pipe(babel({
            presets: 'env'
        }))
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(gulp.dest('dist/'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/'))
});

gulp.task('html', function () {
    gulp.src(['src/html/**/*.html'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifyHtml())
        .pipe(gulp.dest('dist/'))
});

gulp.task('concatenateFiles', function() {
    return gulpMerge(
        gulp.src('dist/bundle.css')
            .pipe(inject.wrap("\n<style>\n", "\n</style>\n")),

        gulp.src('dist/bundle.js')
            .pipe(inject.wrap("\n<script>\n", "\n</script>\n\n")),

        gulp.src('src/html/player.html')
        )
        .pipe(concat('widget.html'))
        .pipe(gulp.dest('dist/'));
});

gulp.task('concatenateFilesMinified', function() {
    return gulpMerge(
        gulp.src('dist/bundle.min.css')
            .pipe(inject.wrap('<style>', '</style>')),

        gulp.src('dist/bundle.min.js')
            .pipe(inject.wrap('<script>', '</script>')),

        gulp.src('dist/player.min.html')
        )
        .pipe(concat('widget.min.html'))
        .pipe(gulp.dest('dist/'));
});

const js = 'src/**/*.js';
const css = 'src/**/*.css';
const html = 'src/**/*.html';
const all = [js, css, html];

gulp.task('default', ['clean', 'js', 'css', 'html'], function () {
    gulp.watch(js, ['js']);
    gulp.watch(css, ['css']);
    gulp.watch(html, ['html']);

    setTimeout(function() {
        runSequence(['concatenateFiles', 'concatenateFilesMinified']);
    }, 2000);
});

我知道这是一个糟糕的方法，特别是如果你看一下setTimeout（），但我在这一点上已经迷失了（这是我的第一个gulpfile）。

我也试过这个：

gulp.task('default', ['clean', 'js', 'css', 'html', 'concatenateFiles', 'concatenateFilesMinified'], function () {
    gulp.watch(js, ['js']);
    gulp.watch(css, ['css']);
    gulp.watch(html, ['html']);
});

但问题是所有依赖任务都是并行执行的，所以'concatenateFiles'和'concatenateFilesMinified'是在他们的依赖项（例如JS，CSS和HTML）准备就绪之前启动的。

此外，gulp.watch()仅适用于js，css和html任务。

我该如何正确地做到这一点？

TLDR：

我想：

从src文件夹构建CSS，JS和HTML文件（每种类型1个文件）
将这三个文件连接成一个文件（将JS包装到<script>，将CSS包装到<style>）到dist/widget.html
将步骤2中的文件缩小为dist/widget.min.html

我希望在运行gulp default时发生这三件事。此外，我还希望每次更改src/文件夹中的文件时刷新步骤2和3中的文件

Answer 1

runSequence应该可以处理正在返回的任务。为js，html，concatenateFiles，concatenateFilesMinified

添加'return'

Gulp：如何在编译后连接文件？

1 个答案: