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

时间:2017-07-28 09:25:51

标签: javascript sass gulp watch nodemon

首先,我知道关于这个话题有一些关于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文件时没有任何反应。

欢迎任何建议,谢谢!

1 个答案:

答案 0 :(得分:0)

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