使用 gulp 观察样式并运行 nodemon 服务器

Question

首先，我知道关于这个主题有一些关于 SO 的问题，但我尝试使用他们的任务结构和修复，但没有什么对我有用...

我现在只是在看我的样式，稍后我会添加脚本和图像。

这是我的gulpfile.js：

'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var cssnano = require('gulp-cssnano');
var postcss = require('gulp-postcss');
var watch = require('gulp-watch');
var sourcemaps = require('gulp-sourcemaps');
var lost = require('lost');
var nodemon = require('gulp-nodemon');
var config = require('./config.js');

// Getting app name
var contract = config.contract;

// Directories
var dirs = {
    stylesSrc: '_assets/' + contract + 'styles/scss/**/*.scss',
    stylesDest: '_assets/' + contract + 'styles/css'
};

// Styles task with autoprefixer and lostgrid
gulp.task('styles', () => {
    return gulp.src(dirs.stylesSrc)
        .pipe(sass())
        .pipe(postcss([
            autoprefixer({
                browsers: [
                    "Android 2.3",
                    "Android >= 4",
                    "Chrome >= 20",
                    "Firefox >= 24",
                    "Explorer >= 8",
                    "iOS >= 6",
                    "Opera >= 12",
                    "Safari >= 6"
                ]
            }),
            lost()
        ]))
    .pipe(gulp.dest(dirs.stylesDest))
});

// Watch styles
gulp.task('watch', function(){
     gulp.watch(dirs.stylesSrc, ['styles']);
})

// Nodemon server
gulp.task('serve', function(){
    nodemon({'script': 'server.js'});
});

// Start server and watch for development
gulp.task('default', ['serve', 'watch']);

我已经尝试了几次迭代，但这是当前似乎有效但无法观看的迭代。这是终端输出：

npm run start
gulp
Using gulpfile ~/Development/projectTitle/gulpfile.js
Starting 'serve'...
Finished 'serve' after 36 ms
Starting 'watch'...
Finished 'watch' after 9.64 ms
Starting 'default'...
Finished 'default' after 23 μs
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node server.js`
Server listening on port 8086

当我保存带有更改的 Sass 文件时，什么也没有发生。

欢迎任何建议，谢谢！

Answer 1

这与上面 Mark 评论的路径级别有关。需要注意 URL 路径中的前缀和尾部斜杠。