Gulp 命令 运行 永不完成
Gulp Command Run Never Finish
我已经从 wrappixel 网站购买了模板 MaterialPro。拿到模板包后,我按照模板附带的文档开始安装如下:
- 从 https://nodejs.org/en/download/
安装 Node.js
- 打开终端导航到
material-pro/
- 安装 npm:
npm install --global npm@latest
- 安装纱线:
npm install --global yarn
- 安装gulp:
npm install --global gulp-cli
- 复制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 文件进行一些更改,它将显示一些更改。
外植
- 您的默认命令是
gulp.task('default', watch);
- 当你 运行
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);
}
我已经从 wrappixel 网站购买了模板 MaterialPro。拿到模板包后,我按照模板附带的文档开始安装如下:
- 从 https://nodejs.org/en/download/ 安装 Node.js
- 打开终端导航到
material-pro/
- 安装 npm:
npm install --global npm@latest
- 安装纱线:
npm install --global yarn
- 安装gulp:
npm install --global gulp-cli
- 复制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 文件进行一些更改,它将显示一些更改。
外植
- 您的默认命令是
gulp.task('default', watch);
- 当你 运行
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);
}