3

ノード プロジェクトにブートストラップを追加する際に問題が発生しました。bower 経由で bootstrap-sass-official をインストールし、ブートストラップをコンパイルするための gulp タスクを追加しました。

コンソールからブートストラップを直接コンパイルするタスクを実行したところ、正常に終了しました。私のgulpfile.coffee

gulp = require 'gulp'
$ = (require 'gulp-load-plugins')()
livereload = require 'gulp-livereload'
nodemon = require 'gulp-nodemon'
concat = require 'gulp-concat'
express = require 'express'
path = require 'path'
sass = require 'gulp-ruby-sass'
app = express()

gulp.task 'bootstrap-sass', =>
  gulp.src './bower_components/bootstrap-sass-official/assets/stylesheets/**/*.scss'
  .pipe $.plumber()
  .pipe $.sass({
    outputStyle: 'compressed'
    sourceComments: 'map'
    includePaths : ['./bower_components/bootstrap-sass-official/assets/stylesheets']
  })
  .on 'error', (err) =>
    console.log err
  .pipe gulp.dest 'dist/stylesheets/bootstrap'


gulp.task 'compass', =>
  gulp.src './src/stylesheets/*.sass'
  .pipe $.plumber()
  .pipe $.compass {
    css: 'dist/stylesheets'
    sass: 'src/stylesheets'
  }
  .pipe gulp.dest 'dist/stylesheets'
#  .pipe livereload()


gulp.task 'coffee', =>
  gulp.src 'src/scripts/main.coffee', {read: false}
  .pipe $.plumber()
  .pipe $.browserify {
    debug: true
    insertGlobals: false
    transform: ['coffeeify']
    extensions: ['.coffee']
  }
  .pipe $.rename 'app.js'
  .pipe gulp.dest 'dist/scripts'
  .pipe livereload()


gulp.task 'images', =>
  gulp.src './src/images/**/*'
  .pipe gulp.dest './dist/images/'
  .pipe livereload()

gulp.task 'templates', =>
  gulp.src 'src/*.jade'
  .pipe $.plumber()
  .pipe $.jade {
    pretty: true
  }
  .pipe gulp.dest 'dist/'
  .pipe livereload()

gulp.task 'express', =>
  app.use express.static(path.resolve './dist')
  app.listen 1337
  $.util.log 'Listening on port: 1337'

gulp.task 'watch', =>
  livereload.listen()
  gulp.watch 'src/stylesheets/*.sass', ['compass']
  gulp.watch 'src/scripts/*.coffee', ['coffee']
  gulp.watch 'src/*.jade', ['templates']
  gulp.watch './src/images/**/*', ['images']
  $.notify {message: "Reload"}


gulp.task 'default', ['images', 'watch', 'express', 'demon']
gulp.task 'demon', =>
  nodemon {
    script: 'dist/scripts/app.js'
    env: {'NODE_ENV': 'development'}
    nodeArgs: ['--debug=9999']
  }

この問題を解決する方法を考えていますか?

4

1 に答える 1

2

gulp を使用して**/*.scssfromを含める代わりに、ステートメントを介しbootstrap-sassてファイルを「インポート」する SCSS ファイルを作成します。bootstrap-sass@import

実際にはファイルをインクルードする必要がある順序があり、ステートメントbootstrap-sassを使用してその順序を制御できるため、このようにすることが重要です。@import

たとえば、これを行う方法の例を次に示します。app.scss他のすべてを含む単一のファイルであることに注意してください。app.scssGulp が処理する必要がある唯一のものになります。

次に、gulp コマンドは次のようになります。

gulp.src './app.scss'
  .pipe blah blah sass stuff
  .pipe gulp.dest 'dist/stylesheets/'

FWIW、SCSS の処理に使用する Gulp タスクは、こちらのstyles:scssタスクです。

于 2015-05-14T17:38:30.147 に答える