Laravel - Sass 설정하기

Question

내 laravel 프로젝트에 sass를 설치하려고하는데, resources/assets/sass 폴더를 만들었지 만 npm 모듈이 설치되어 있지만 공용 페이지/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

입니까?