我正在分别为开发和生产环境运行gulp和gulp prod命令。
gulp for development工作正常,但gulp prod命令返回dest.on不是函数错误。gulp" build.js"数据如下所示:
'use strict';
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});
gulp.task('partials', function() {
return gulp.src([
path.join(conf.paths.src, '/app/**/*.html'),
path.join(conf.paths.tmp, '/serve/app/**/*.html')
])
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe($.angularTemplatecache('templateCacheHtml.js', {
module: 'angularSeedApp',
root: 'app'
}))
.pipe(gulp.dest(conf.paths.tmp + '/partials/'));
});
gulp.task('html', ['inject', 'partials'], function() {
var partialsInjectFile = gulp.src(path.join(conf.paths.tmp,
'/partials/templateCacheHtml.js'), {
read: false
});
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: path.join(conf.paths.tmp, '/partials'),
addRootSlash: false
};
var htmlFilter = $.filter('*.html');
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
var assets;
return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe(assets = $.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngAnnotate())
.pipe($.uglify({
preserveComments: $.uglifySaveLicense
})).on('error', conf.errorHandler('Uglify'))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.replace('../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true,
conditionals: true
}))
.pipe(htmlFilter.restore())
.pipe(gulp.dest(path.join(conf.paths.dist, '/')))
.pipe($.size({
title: path.join(conf.paths.dist, '/'),
showFiles: true
}));
});
// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function() {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});
gulp.task('other', function() {
var fileFilter = $.filter(function(file) {
return file.stat.isFile();
});
return gulp.src([
path.join(conf.paths.src, '/**/*'),
path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
])
.pipe(fileFilter)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});
gulp.task('copyimage', function () {
return gulp.src([
'../styles/img/**/*',
])
.pipe(gulp.dest(path.join(conf.paths.dist, '/img/')));
});
gulp.task('clean', function(done) {
$.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp,
'/')], done);
});
gulp.task('prodclean', function () {
return $.del(conf.buildPaths,{force: true});
});
gulp.task('otherprod', function () {
var fileFilter = $.filter(function (file) {
return file.stat.isFile();
});
var htmlFilter = $.filter('*.html', { restore: true });
var jsFilter = $.filter('**/*.js', { restore: true });
var cssFilter = $.filter('**/*.css', { restore: true });
return gulp.src([
path.join(conf.paths.src, '/**/*'),
path.join('!' + conf.paths.src, '/**/*.{html,css,js,less}')
])
.pipe(cssFilter)
//.pipe($.minifyCss({ processImport: false }))
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense
})).on('error', conf.errorHandler('Uglify'))
.pipe(jsFilter.restore)
.pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});
gulp.task('other', function () {
var fileFilter = $.filter(function (file) {
return file.stat.isFile();
});
var htmlFilter = $.filter('*.html', { restore: true });
var jsFilter = $.filter('**/*.js', { restore: true });
var cssFilter = $.filter('**/*.css', { restore: true });
return gulp.src([
path.join(conf.paths.src, '/**/*'),
path.join('!' + conf.paths.src, '/**/*.{html,css,js,less}'),
'./resources/**/*'
])
.pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});
gulp.task('build', ['html', 'fonts', 'other']);
gulp.task('prodbuild', ['html', 'fonts', 'otherprod','copyimage'],
function () {
return gulp.src([
'./dist/**/*',
])
.pipe(gulp.dest('../'));
});
gulp.task('prod', ['clean','prodclean'], function () {
gulp.start('prodbuild');
});
package.json看起来像这样:
{
"name": "angularSeedApp",
"version": "0.0.0",
"dependencies": {
"gulp": "^3.9.1"
},
"scripts": {
"test": "gulp test"
},
"devDependencies": {
"browser-sync": "~2.7.12",
"browser-sync-spa": "~1.0.2",
"chalk": "~1.0.0",
"concat-stream": "~1.5.0",
"coveralls": "^2.11.2",
"del": "~1.2.0",
"gulp-angular-filesort": "~1.1.1",
"gulp-angular-templatecache": "~1.6.0",
"gulp-autoprefixer": "~2.3.1",
"gulp-csso": "~1.0.0",
"gulp-filter": "~2.0.2",
"gulp-flatten": "~0.0.4",
"gulp-gh-pages": "^0.5.2",
"gulp-inject": "~1.3.1",
"gulp-jshint": "~1.11.0",
"gulp-load-plugins": "~0.10.0",
"gulp-minify-html": "~1.0.3",
"gulp-ng-annotate": "~1.0.0",
"gulp-protractor": "~1.0.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "~0.5.3",
"gulp-rev": "~5.0.0",
"gulp-rev-replace": "~0.4.2",
"gulp-sass": "^2.0.4",
"gulp-size": "~1.2.1",
"gulp-sourcemaps": "~1.5.2",
"gulp-uglify": "~1.4.0",
"gulp-useref": "~1.2.0",
"gulp-util": "~3.0.5",
"http-proxy-middleware": "~0.0.5",
"istanbul": "^0.3.15",
"jshint-stylish": "~2.0.0",
"karma": "~0.12.36",
"karma-angular-filesort": "~0.1.0",
"karma-jasmine": "~0.3.5",
"karma-ng-html2js-preprocessor": "~0.1.2",
"karma-phantomjs-launcher": "~0.2.0",
"lodash": "~3.9.3",
"main-bower-files": "~2.8.0",
"merge-stream": "~0.1.7",
"require-dir": "~0.3.0",
"uglify-save-license": "~0.4.1",
"wiredep": "~2.2.2",
"wrench": "~1.5.8"
},
"engines": {
"node": ">=0.10.0"
}
}
npm version = 5.3.0
gulp versions = CLI版本3.9.1,本地版本3.9.1
以下是gulp prod详细信息的输出错误。
$ gulp prod
[10:42:23] Using gulpfile C:\wamp64\www\angular-gulp-seed-
master\gulpfile.js
(node:2580) DeprecationWarning: process.EventEmitter is deprecated.
Use require('events') instead.
[10:42:23] Starting 'clean'...
[10:42:23] Starting 'prodclean'...
[10:42:23] Finished 'prodclean' after 2.78 ms
[10:42:23] Finished 'clean' after 115 ms
[10:42:23] Starting 'prod'...
[10:42:23] Starting 'scripts'...
[10:42:23] Starting 'styles'...
[10:42:24] Starting 'partials'...
[10:42:24] Starting 'fonts'...
[10:42:24] Starting 'otherprod'...
[10:42:24] 'otherprod' errored after 5.95 ms
[10:42:24] TypeError: dest.on is not a function
at DestroyableTransform.Readable.pipe (C:\wamp64\www\angular-gulp-seed-master\node_modules\gulp-filter\node_modules\readable-stream\lib\_stream_readable.js:516:8)
at Gulp.<anonymous> (C:\wamp64\www\angular-gulp-seed-master\gulp\build.js:127:6)
at module.exports (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\index.js:134:8)
at Gulp.<anonymous> (C:\wamp64\www\angular-gulp-seed-master\gulp\build.js:159:8)
at module.exports (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (C:\wamp64\www\angular-gulp-seed-master\node_modules\orchestrator\index.js:214:10)
[10:42:24] Finished 'prod' after 1.68 s
[10:42:24] gulp-inject 1 files into index.scss.
[10:42:25] all files 2.79 kB
[10:42:25] Finished 'scripts' after 2.17 s
[10:42:25] Finished 'partials' after 888 ms
[10:42:25] Finished 'fonts' after 782 ms
[10:42:27] Finished 'styles' after 4.18 s
gulp 工作正常。
gulp prod 存在我无法识别的问题。所以请帮帮我。
提前致谢。