Gulp 不使用 main-bower-files 创建 JS 和 CSS 文件
Gulp not creating JS and CSS files using main-bower-files
我正在使用 Gulp 到 concatenate/minify 所有 JS/CSS 文件,分别来自 bower 文件夹(使用 main-bower-files)和 src 文件夹。我正在使用 gulp-load-plugins 从 package.json 加载以下依赖项(所有这些都存在于 node_modules 中):
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-filter": "^4.0.0",
"gulp-load-plugins": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"main-bower-files": "^2.13.1"
}
这里是 gulpfile.js:
// Include Gulp
var gulp = require('gulp');
var src = 'src/';
var dest = 'public/';
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
//Concat + Minify JS
gulp.task('js', function() {
var jsFiles = ['/src/js/*'];
gulp.src(plugins.mainBowerFiles().concat(jsFiles))
.pipe(plugins.filter('*.js'))
.pipe(plugins.concat('main.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest('public/js'));
});
//Concat + Minify CSS
gulp.task('css', function() {
var cssFiles = ['src/css/*'];
gulp.src(plugins.mainBowerFiles().concat(cssFiles))
.pipe(plugins.filter('*.css'))
.pipe(plugins.concat('main.min.css'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'css'));
});
// Default Task
gulp.task('default', ['js','css']);
Gulp 未在控制台中提供任何错误,但 JS 和 CSS 文件均未创建。
最终问题缩小到 gulp-过滤器不返回任何文件。对于尝试类似设置的任何人,我最终采取了稍微不同的路径,使用 mainBowerFiles 过滤达到相同最终结果的文件:
// Include Gulp
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
var src = 'src/';
var dest = 'public/';
//Concat + Minify JS
gulp.task('test', function() {
console.log(plugins);
});
//Concat + Minify JS
gulp.task('js', function() {
var jsFiles = ['src/js/*'];
gulp.src(plugins.mainBowerFiles('**/*.js').concat(jsFiles))
.pipe(plugins.concat('main.min.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'js'));
});
gulp.task('css', function() {
var cssFiles = ['src/css/*'];
gulp.src(plugins.mainBowerFiles('**/*.css', {
overrides: {
bootstrap: {
main: [
'./dist/css/bootstrap.min.css'
]
}
}
}).concat(cssFiles))
.pipe(plugins.concat('main.min.css'))
.pipe(plugins.cleanCss())
.pipe(gulp.dest(dest + 'css'));
});
// Default Task
gulp.task('default', ['js','css']);
我遇到了完全相同的问题,结果 'gulp-filter' 无法正常工作是因为这一行:
.pipe(plugins.filter('*.js'))
应该是:
.pipe(plugins.filter('**/*.js'))
CSS 也应该发生同样的情况,并且工作正常。
我正在使用 Gulp 到 concatenate/minify 所有 JS/CSS 文件,分别来自 bower 文件夹(使用 main-bower-files)和 src 文件夹。我正在使用 gulp-load-plugins 从 package.json 加载以下依赖项(所有这些都存在于 node_modules 中):
"dependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-filter": "^4.0.0",
"gulp-load-plugins": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.3",
"main-bower-files": "^2.13.1"
}
这里是 gulpfile.js:
// Include Gulp
var gulp = require('gulp');
var src = 'src/';
var dest = 'public/';
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
//Concat + Minify JS
gulp.task('js', function() {
var jsFiles = ['/src/js/*'];
gulp.src(plugins.mainBowerFiles().concat(jsFiles))
.pipe(plugins.filter('*.js'))
.pipe(plugins.concat('main.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest('public/js'));
});
//Concat + Minify CSS
gulp.task('css', function() {
var cssFiles = ['src/css/*'];
gulp.src(plugins.mainBowerFiles().concat(cssFiles))
.pipe(plugins.filter('*.css'))
.pipe(plugins.concat('main.min.css'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'css'));
});
// Default Task
gulp.task('default', ['js','css']);
Gulp 未在控制台中提供任何错误,但 JS 和 CSS 文件均未创建。
最终问题缩小到 gulp-过滤器不返回任何文件。对于尝试类似设置的任何人,我最终采取了稍微不同的路径,使用 mainBowerFiles 过滤达到相同最终结果的文件:
// Include Gulp
var gulp = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
replaceString: /\bgulp[\-.]/
});
var src = 'src/';
var dest = 'public/';
//Concat + Minify JS
gulp.task('test', function() {
console.log(plugins);
});
//Concat + Minify JS
gulp.task('js', function() {
var jsFiles = ['src/js/*'];
gulp.src(plugins.mainBowerFiles('**/*.js').concat(jsFiles))
.pipe(plugins.concat('main.min.js'))
.pipe(plugins.uglify())
.pipe(gulp.dest(dest + 'js'));
});
gulp.task('css', function() {
var cssFiles = ['src/css/*'];
gulp.src(plugins.mainBowerFiles('**/*.css', {
overrides: {
bootstrap: {
main: [
'./dist/css/bootstrap.min.css'
]
}
}
}).concat(cssFiles))
.pipe(plugins.concat('main.min.css'))
.pipe(plugins.cleanCss())
.pipe(gulp.dest(dest + 'css'));
});
// Default Task
gulp.task('default', ['js','css']);
我遇到了完全相同的问题,结果 'gulp-filter' 无法正常工作是因为这一行:
.pipe(plugins.filter('*.js'))
应该是:
.pipe(plugins.filter('**/*.js'))
CSS 也应该发生同样的情况,并且工作正常。