Laravel - Sassを設定する

Question

私はlaravelプロジェクトでsassをセットアップしようとしていますが、resources/assets/sassというフォルダを作成してnpmモジュールをインストールしましたが、何もpublic/cssフォルダにコピーされません。コンソール：

は、リソースの読み込みに失敗しました：サーバーは、（見つかりません）404 の状態で応答し

そして、私は一口を実行したときには、ブラウザでのパブリックフォルダのフォルダ構造を開き。 どのように設定すればいいですか？

これは、あなたが 'NPMインストール' コマンドを実行したことが、私の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

のですか？