我有一个使用两个gulpfiles进行编译的静态站点。一个是gulpfile.dev.js
,它可以正确编译所有文件,并使用由browsersync提供服务的静态服务器。 gulpfile.prod.js
与dev文件完全相同,只是没有browserync服务器。当我使用DeployHQ编译我的文件以在我的服务器上移动文件时,它不会编译必要的css
文件夹。
我的gulpfile.prod.js
文件:
//DH
var gulp = require('gulp'), //Task runner
uglify = require('gulp-uglify'), //Minimizies JS
sass = require('gulp-ruby-sass'), //Compiles to CSS
imagemin = require('gulp-imagemin'), // Minimize images
concat = require('gulp-concat'),
concatCss = require('gulp-concat-css'),
gutil = require('gulp-util'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
pug = require('gulp-pug'),
htmlmin = require('gulp-htmlmin');
// Define paths for sources and destination.
var paths = {
src: {
js: './src/js/*.js',
sass: './src/sass/**/*.sass',
html: './views/*.pug'
},
dest: {
js: './app/build/js',
css: './app/build/css',
html: './app'
}
};
var autoprefixerOptions = {
browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};
//Error look-outs in gulp
function errorLog(error){
console.error.bind(error);
this.emit('end');
}
// Scripts
gulp.task('scripts', function(){
gulp.src(paths.src.js)
.pipe(uglify())
.on('error', errorLog)
.pipe(concat('main.js'))
.pipe(gulp.dest(paths.dest.js))
});
// PUG -> HTML
gulp.task('pug', function buildHTML() {
return gulp.src(paths.src.html)
.pipe(pug())
.pipe(gulp.dest(paths.dest.html))
.pipe(htmlmin({collapseWhitespace: true}));
});
// Styles
gulp.task('styles', function(){
return sass(paths.src.sass)
.on('error', errorLog)
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cssnano())
.pipe(gulp.dest(paths.dest.css))
});
//Run task
gulp.task('default', [
'scripts',
'pug',
'styles']);
这些是DeployHQ执行的bash
命令,用于在正确的目录中正确提供文件。其中大部分只是删除我不需要在服务器上的文件。我构建了从app/
提供所需的文件,然后将文件移动到根html目录。 nam run prod
转换为gulp default --gulpfile gulpfile.prod.js
cd /var/www/site.com/html
npm install
npm run prod
rm -rf node_modules/ src/ views/
cd app
cp -a build/ /var/www/site.com/html
cp index.html /var/www/site.com/html
cd ..
rm -rf app/
rm .gitlab-ci.yml gulpfile.dev.js gulpfile.prod.js package.json .gitignore README.md
在本地运行prod文件会按照预期编译所有内容,但在服务器上却没有。它不编译css文件夹。
我已更改了我的样式任务,以反映gulp-ruby-sass
的文档:
gulp.task('styles', function(){
sass(paths.src.sass)
.on('error', errorLog)
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cssnano())
.pipe(gulp.dest(paths.dest.css))
});
CSS文件夹仍然无法编译。