Question

我有我的sass gulp任务来编译我的初始css：

var input = './sass/bootstrap/*.scss';
var output = './public/css';


var sassOptions = {
     lineNumbers: true
};

gulp.task('sass', function () {
    return gulp
        // Find all `.scss` files from the `stylesheets/` folder
        .src(input)
        .pipe(sourcemaps.init())
        .pipe(sass(sassOptions))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(output));
});

然后在一个单独的项目中，我有我的观察任务来缩小css：

gulp.task('debug-css', function () {
gulp.src([
        'assets/css/style.test.css',
        'assets/css/other.css'
    ])
    .pipe(concat('app.css'))
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./build/'));
livereload.listen();
gulp.watch('assets/**/*.css', function() {
    gulp.src([
            'assets/css/style.test.css',
            'assets/css/other.css'
        ])
        .pipe(concat('app.css'))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./build/'))
        .pipe(livereload());
});
});

当我使用chrome dev工具时，我无法在任何地方看到sass partials，有没有办法设置源图，以便我可以告诉哪个css来自哪个sass文件？

Answer 1

对于你的源图，一切都很好，你应该尝试将你创建的gulp.task和gulp.watch分开一些，以避免让自己迷惑。

我重新创建了你的Gulpfile，添加了一些更有用的插件，这里是要点：

https://gist.github.com/carlosbensant/2a3a36633a06a50dda775b2a8bde3958

使用资源地图

说，如果你想在开发阶段看到源图，你只需要运行gulp;当你只想部署你的应用程序时，你应该运行gulp css将源映射删除到编译的CSS中（以便节省文件空间）。

<强>建议

尝试使用BrowserSync，使用LiveReload几年后，当我第一次使用BrowserSync时，我没有回到LiveReload，因为它不仅仅是实时重新加载。它最酷的事情之一就是在多个浏览器（和平台）之间进行同步。

希望有所帮助！

sass sourcemaps gulp任务设置

1 个答案: