Gulp 命令运行永远不会完成

Question

我从wrappixel 网站购买了模板 MaterialPro。在我已经得到模板包之后，我按照模板附件的文档开始安装，如下所示：

1. 从https://nodejs.org/en/download/ 安装 Node.js
2. 打开终端导航到material-pro/
3. 安装npm：npm install --global npm@latest
4. 安装纱线：npm install --global yarn
5. 安装 gulp：npm install --global gulp-cli
6. 复制 gulp：gulp copy

根模板里面的gulpfile.js是这样的：

//gulpfile.js
console.time("Loading plugins"); //start measuring
const gulp = require('gulp'),
    minifyCSS = require('gulp-clean-css'),
    uglify = require('gulp-uglify'),
    rename = require("gulp-rename"),
    sass = require('gulp-sass'),
    npmDist = require('gulp-npm-dist');
console.timeEnd('Loading plugins');

const sassFiles = 'src/assets/scss/*.scss',
    cssDest = 'dist/css/';

//compile scss into css
function style() {
    return gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
}

//This is for the minify css
async function minifycss() {
    return gulp.src(['dist/css/*.css', '!dist/css/**/*.min.css'])
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifyCSS())
        .pipe(gulp.dest(cssDest));
}

// This is for the minifyjs
async function minifyjs() {
    return gulp.src(['dist/js/custom.js','dist/js/app.js', '!dist/js/custom.min.js',  '!dist/js/app.min.js'] )
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
}

// Copy dependencies to ./public/libs/
async function copy() {
    gulp.src(npmDist(), {
            base: './node_modules'
        })
        .pipe(gulp.dest('./src/assets/libs'));
};

async function watch() {
    gulp.watch(['src/assets/scss/**/*.scss'], style);
    gulp.watch(['dist/css/style.css'], minifycss);
    gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}


gulp.task('default', watch);

exports.style = style;
exports.minifycss = minifycss;
exports.minifyjs = minifyjs;
exports.copy = copy;
exports.watch = watch;

毕竟，我对模板 scss 文件进行了一些更改，并运行了gulp 命令。此时，gulp 命令运行从未完成 unitl now，终端上的输出如下所示

Loading plugins: 539.410ms
[17:01:03] Using gulpfile ~/Documents/documentation/materialpro-bootstrap-latest/material-pro/gulpfile.js
[17:01:03] Starting 'default'...
[17:01:03] Finished 'default' after 18 ms

这出了什么问题？请帮忙，谢谢。

P.S：如果我的问题不完整或其他问题，请道歉，如果建议我会尝试添加更多细节。

Answer 1

您的 gulp 代码很好。对您的 scss 或 js 文件进行了一些更改，它会显示一些更改。

解释

1. 您的默认命令是gulp.task('default', watch);
2. 当您运行gulp 时，它开始观察您的scss、css、js 代码。如果有新的更改，它将执行命令。

建议。像这样使用。

async function watch() {
    gulp.watch(['src/assets/scss/**/*.scss'], style, minifycss);
    gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}