Gulp没有在生产版本

时间:2016-06-10 21:36:05

标签: javascript node.js gulp

我有一个使用两个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文件夹。

编辑2:

我已更改了我的样式任务,以反映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文件夹仍然无法编译。

0 个答案:

没有答案