Gulp'start'創建錯誤而不是創建'DIst'文件夾

當啓動Gulp啓動時，預計會創建一個Dist文件夾，並開始監視包含的依賴關係 - 但相反，它會在'css'concat 。Gulp'start'創建錯誤而不是創建'DIst'文件夾

我試圖創建dist文件夾手動
src目錄

這還沒有做出區別創建test.css文件。同樣的錯誤彈出，沒有其他事情發生。

我遵循的教程:: https://www.youtube.com/watch?v=p9ZngMW80-k&t=1s 預期結果在時間索引37:48處可見。這裏是我的結果...

錯誤

$ gulp start [05:06:38] Using gulpfile ~/OneDrive/~webDev/chazSutherland/gulpfile.js [05:06:38] Starting 'start'... [05:06:38] Starting 'build'... [05:06:38] Starting 'css'... [05:06:38] 'css' errored after 12 ms [05:06:38] ReferenceError: concat is not defined at Gulp. (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:14:11) at module.exports (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/lib/runTask.js:34:7) at Gulp.Orchestrator._runTask (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:273:3) at Gulp.Orchestrator._runStep (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:214:10) at Gulp.Orchestrator.start (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:134:8) at Gulp. (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/gulpfile.js:39:8)
at module.exports (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/lib/runTask.js:34:7) 
at Gulp.Orchestrator._runTask (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:273:3) 
at Gulp.Orchestrator._runStep (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:214:10) 
at Gulp.Orchestrator.start (/Users/ChazOSX/OneDrive/~webDev/chazSutherland/node_modules/orchestrator/index.js:134:8) 
[05:06:38] Finished 'build' after 14 ms [05:06:38] Finished 'start' after 27 ms

gulpfile.js

const gulp = require('gulp'); 
const gulpConcat = require('gulp-concat'); 
const browserSync = require('browser-sync').create(); 

const scripts = require('./scripts'); 
const styles = require('./styles'); 

var devMode = false; 

gulp.task('css', function(){ 
    gulp.src(styles) 
    .pipe(concat('main.css')) 
    .pipe(gulp.dest('./dist/css')) 
    .pipe(browserSync.reload({ 
     stream: true 
    })); 
}); 

gulp.task('js', function(){ 
    gulp.src(scripts) 
    .pipe(concat('scripts.js')) 
    .pipe(gulp.dest('./dist/js')) 
    .pipe(browserSync.reload({ 
     stream: true 
    })); 
}); 

gulp.task('html', function(){ 
    gulp.src('./src/html/**/*.html') 
    .pipe(gulp.dest('./dist/')) 
    .pipe(browserSync.reload({ 
     stream: true 
    })); 
}); 

gulp.task('build', function(){ 
    gulp.start(['css', 'js', 'html']); 
}); 

gulp.task('browser-sync', function(){ 
    browserSync.init(null, { 
    open: false, 
    server: { 
     baseDir: 'dist' 
    } 
    }); 
}); 

gulp.task('start', function(){ 
    devMode = true; 
    gulp.start(['build', 'browser-sync']); 
    gulp.watch(['./src/css/**/*.css'], ['css']); 
    gulp.watch(['./src/js/**/*.js'], ['js']); 
    gulp.watch(['./src/html/**/*.html'], ['html']); 
});

的package.json

{ 
    "name": "chazsutherland", 
    "version": "1.0.0", 
    "description": "Practice practice practice!!", 
    "main": "index.js", 
    "scripts": { 
    "test": "make test" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "(https://github.com/CyberGolem/learningGulp.com)" 
    }, 
    "keywords": [ 
    "npm" 
    ], 
    "author": "Chaz Sutherland", 
    "license": "ISC", 
    "dependencies": { 
    "angular": "^1.6.2", 
    "angular-route": "^1.6.2" 
    }, 
    "devDependencies": { 
    "browser-sync": "^2.18.7", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.1" 
    } 
}

styles.json

[ 
    "./src/css/**/*.css" 
]

scripts.json

[ 
    "./node_modules/angular/angular.js", 
    "./node_modules/angular-route/angular-route.js", 
    "./src/js/**/*.js" 
]

來源

2017-02-13 Chaz Sutherland

你的錯誤告訴你原因：

ReferenceError: concat is not defined at Gulp.

您正在嘗試引用未在腳本中定義的concat變量。

const gulpConcat = require('gulp-concat'); 
// ... 
.pipe(concat('main.css')) 
// ... 
.pipe(concat('scripts.js'))

的gulpConcat不變只是重命名爲concat和錯誤將是固定的。在你提到的視頻中，the declaration is added at 22:27。

來源

2017-02-13 13:43:49

在你的代碼是需要一飲而盡CONCAT作爲

const gulpConcat = require('gulp-concat');

但是後來你想用它作爲.pipe(concat('main.css'))

錯誤是告訴你，concat不以線14定義的，這是真的，因爲你定義gulpConcat代替concat

因此，對於解決方案的變化：

const gulpConcat = require('gulp-concat');到 const concat = require('gulp-concat');

來源

2017-02-13 13:43:34

Gulp'start'創建錯誤而不是創建'DIst'文件夾

回答

相關問題