Gulp命令运行永不结束

问题描述

我已经从wrappixel网站上购买了MaterialPro模板。在已经获得模板包之后,我将按照以下步骤从带有模板的文档开始安装:

  1. 通过https://nodejs.org/en/download/
  2. 安装Node.js
  3. 打开终端,导航到material-pro/
  4. 安装npm:npm install --global npm@latest
  5. 安装纱线:npm install --global yarn
  6. 安装gulp:npm install --global gulp-cli
  7. 复制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并在这样的终端上输出

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:如果我的问题不完整或有什么问题,敬请见谅。如果建议的话,我会尝试添加更多详细信息。

解决方法

您的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);
}