Question

我正在尝试在我的laravel项目中设置sass，我已经创建了一个文件夹resources/assets/sass，安装了npm模块，但没有任何内容被复制到public / css文件夹，所以当我打开我的页面时，我得到了错误控制台：

无法加载资源：服务器响应状态为404 （未找到）

当我运行gulp时，它会在浏览器中打开公用文件夹的文件夹结构。我应该如何设置它？

这是我的gulpfile.js

var gulp          = require('gulp');
var sass          = require('gulp-sass');
var include       = require('gulp-include');
var watch         = require('gulp-watch');
var batch         = require('gulp-batch');
var sourcemaps    = require('gulp-sourcemaps');
var prefix        = require('gulp-autoprefixer');
var connect       = require('gulp-connect');
var browserify    = require('gulp-browserify');
var livereload    = require('gulp-livereload');
var browsersync   = require('browser-sync');

var config = {
  port: 1338,
  srcDir: './src',
  destDir: './public',
  content: {
    src: '/**/*.html'
  },
  styles: {
    src: '/scss/app.scss',
    dest: '/css',
    includePaths: [
      'node_modules/foundation-sites/scss',
      'node_modules/motion-ui/src'
    ],
    prefix: ["last 2 versions", "> 1%", "ie 9"]
  },
  scripts: {
    src: '/js/app.js',
    dest: '/js'
  },
  img: {
    src: '/img/**/*',
    dest: '/img'
  }
};

var srcDir = './src',
    destDir = './build';

gulp.task('styles', function() {
  return gulp.src(config.srcDir + config.styles.src)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: config.styles.includePaths,
      sourceMap: true,
      outFile: config.destDir + config.styles.dest + '/app.css',
      outputStyle: 'compressed'
    }))
    .pipe(prefix(config.styles.prefix))
    .pipe(sourcemaps.write())
    .on('error', sass.logError)
    .pipe(gulp.dest(config.destDir + config.styles.dest))
    .pipe(browsersync.reload({ stream: true }));
});

gulp.task('scripts', function() {
  gulp.src(config.srcDir + config.scripts.src)
      .pipe(browserify({
        insertGlobals : true,
        debug : !gulp.env.production
      }))
      .pipe(gulp.dest(config.destDir + config.scripts.dest))
});

gulp.task('include', function() {
  gulp.src(config.srcDir + config.content.src)
    .pipe(include())
      .on('error', console.log)
    .pipe(gulp.dest(config.destDir));

  return gulp.src(config.srcDir + config.img.src)
    .pipe(gulp.dest(config.destDir + config.img.dest));
});

gulp.task('webserver', function() {
  connect.server({
    root: [config.destDir],
    port: config.port
  });
});

gulp.task('browsersync', function() {
  browsersync({
    port: config.port,
    proxy: 'localhost:' + config.port
  });
});

gulp.task('watch', ['browsersync'], function () {
  watch(config.srcDir + '/**/*.*', batch(function (events, done) {
    gulp.start('include', done);
    gulp.start('styles', done);
    gulp.start('scripts', done);
  }));
});

gulp.task('default', ['styles', 'scripts', 'include', 'webserver', 'watch']);

Answer 1

你运行命令'npm install'吗？

Laravel - 设置sass

1 个答案: