前端开发人员在编写css时是否有工具可以实时查看浏览器上的更改？

通常，当我编写css/scss/less代码并进行更改时，我需要刷新浏览器以查看最新的更改，我有一个双监视器设置，我认为配置浏览器或特定的工具/IDE以在浏览器上实时查看更改非常方便，无需刷新页面。

如果您有Chrome，您可以使用。

---

您还可以设置Grunt/Gulp以查看您的更改并实时同步浏览器。

如果您使用sublime作为文本编辑器，则可以使用

有一些工具可以帮你完成这项工作，如
对于mac
窗户

我在windows上使用Prepos及其非常酷的示例

var gulp = require('gulp'),
    less = require('gulp-less');
    browsersync = require('browser-sync');

gulp.task('less', function() {
  return gulp.src('./src/*.less')
      .pipe(less())
      .pipe(gulp.dest('./css'));
  });

gulp.task('bs', function() {
  browsersync({
      proxy: 'localhost:9000'
  });
}); 

gulp.task('default', ['less','bs'], function(){
  gulp.watch('./src/*.less', ['less']);
  gulp.watch('./dest/*', browsersync.reload);
})

在我看来，这将包括你想要的，但你可以使用…我目前在我的典型工作流程中使用Gulp，所以这里是如何工作的最基本的例子

要真正了解这里发生的事情，并在您的计算机上安装Gulp，您需要阅读Gulp指南（我建议；

Gulp less

文档是，

Gulp sass

文档和

Browsersync

文档）

它的工作方式是使用

Browsersync

在本地服务器上运行站点，让

gulp

监视样式表的更改，并告诉

Browsersync

在每次

gulp

检测到其中一个更改时重新加载页面

此演示支持如下文件夹结构

project
  package.json
  gulpfile.js
  app
    index.html
    styles-less.less // any of these three < v vv
    styles-scss.scss
    styles-css.css

gulpfile.js

：

var gulp = require('gulp'),
    less = require('gulp-less'), // remove if you aren't using LESS
    sass = require('gulp-sass'), // remove if you aren't using Sass
    browserSync = require('browser-sync');

// this gulpfile assumes
// - the simplest flat folder structure, where index.html and all stylesheets are in a directory "app" in the top level of the project directory
//      if the actual folder structure is different,
//          - adjust the  src, dest, and watch globs
//          - and use `browserSync.init({server: {baseDir: 'yourbasedirectory'}});`
// - that your html files `<link>`s one or more css files

// for every .less file, output a .css file with the original file's base name. Remove this task if you aren't using LESS
gulp.task('less', function() {
    return gulp.src('./app/**/*.less')
        .pipe(less())
        .pipe(gulp.dest('./app'))
});

// for every .scss file, output a .css file with the original file's base name. Remove this task if you aren't using Sass
gulp.task('sass', function() {
    return gulp.src('./app/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./app'))
});

// initial compilation of the stylesheets, followed by initial set up Browsersync (which will handle the auto-reloading)
gulp.task('compile-and-serve', ['less', 'sass'], function() { // adjust (or remove) the prerequisite tasks if you're only using one (or neither) of LESS or Sass
    browserSync.init({
        server: {
            baseDir: './app'
        }
    });
});

// this happens when you run `gulp`
gulp.task('default', ['compile-and-serve'], function() { // first compile LESS files, Sass files, and start Browsersync
    gulp.watch('./app/**/*.less', ['less']); // if a change is made to a LESS file, recompile it. Remove this task if you aren't using LESS
    gulp.watch('./app/**/*.scss', ['sass']); // if a change is made to a Sass file, recompile it Remove this task if you aren't using Sass
    gulp.watch(['./app/**/*', '!./app/**/*.{less,scss}'], browserSync.reload); // adjust (or remove) the ! glob if you're only using one (or neither) of LESS or Sass
})

var gulp=require（'gulp'），
less=require（'gulp-less'），//如果不使用less，则删除
sass=require（'gulp-sass'），//如果不使用sass，请删除
browserSync=require（'browser-sync'）；
//这个海湾假定
//-最简单的平面文件夹结构，其中index.html和所有样式表位于项目目录顶层的目录“app”中
//如果实际文件夹结构不同，
//-调整src、dest和手表旋钮
//-并使用`browserSync.init（{server:{baseDir:'yourbasedirectory'}）`
//-您的html文件是一个或多个css文件
//对于每个.less文件，输出一个带有原始文件基名称的.css文件。如果您没有使用更少的资源，请删除此任务
吞咽任务（'less'，函数（）{
返回gulp.src（'./app/***/.less'）
.管道（小于（）
.管道（大口目的地（'./应用'））
});
//对于每个.scss文件，输出一个带有原始文件基名称的.css文件。如果不使用Sass，请删除此任务
gulp.task（'sass'，function（）{
返回gulp.src（“./app/***.scss”）
.pipe（sass（））
.管道（大口目的地（'./应用'））
});
//样式表的初始编译，然后是初始设置Browsersync（它将处理自动重新加载）
gulp.task（'compile-and-service'，['less'，sass']，function（）{//如果您只使用less或sass中的一个（或两者都不使用），请调整（或删除）必备任务
browserSync.init({
服务器：{
baseDir:“./app”
}
});
});
//这种情况发生在你大口大口喝的时候`
task（'default'，['compile-and-service']，function（）{//首先编译较少的文件、Sass文件，然后启动Browsersync
gulp.watch（'./app/***.less'，['less']）；//如果对less文件进行了更改，请重新编译它。如果不使用less，请删除此任务
gulp.watch（'./app/***.scss'，['sass']）；//如果对sass文件进行了更改，请重新编译该文件；如果不使用sass，请删除此任务
gulp.watch（['./app/***'，'！./app/***.{less，scss}']，browserSync.reload）；//如果您只使用less或Sass中的一个（或两个都不使用），请调整（或删除）！glob
})

对于css中的小更改，您可以始终使用开发人员工具。只需在您的浏览器上按F12。这运行一个简单的服务器，仅为静态站点服务，是否有一个选项可以使浏览器与我自己的web服务器（如apache）同步？您需要更改Browersync配置。这个问题应该会有帮助，并看到

var gulp = require('gulp'),
    less = require('gulp-less'), // remove if you aren't using LESS
    sass = require('gulp-sass'), // remove if you aren't using Sass
    browserSync = require('browser-sync');

// this gulpfile assumes
// - the simplest flat folder structure, where index.html and all stylesheets are in a directory "app" in the top level of the project directory
//      if the actual folder structure is different,
//          - adjust the  src, dest, and watch globs
//          - and use `browserSync.init({server: {baseDir: 'yourbasedirectory'}});`
// - that your html files `<link>`s one or more css files

// for every .less file, output a .css file with the original file's base name. Remove this task if you aren't using LESS
gulp.task('less', function() {
    return gulp.src('./app/**/*.less')
        .pipe(less())
        .pipe(gulp.dest('./app'))
});

// for every .scss file, output a .css file with the original file's base name. Remove this task if you aren't using Sass
gulp.task('sass', function() {
    return gulp.src('./app/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./app'))
});

// initial compilation of the stylesheets, followed by initial set up Browsersync (which will handle the auto-reloading)
gulp.task('compile-and-serve', ['less', 'sass'], function() { // adjust (or remove) the prerequisite tasks if you're only using one (or neither) of LESS or Sass
    browserSync.init({
        server: {
            baseDir: './app'
        }
    });
});

// this happens when you run `gulp`
gulp.task('default', ['compile-and-serve'], function() { // first compile LESS files, Sass files, and start Browsersync
    gulp.watch('./app/**/*.less', ['less']); // if a change is made to a LESS file, recompile it. Remove this task if you aren't using LESS
    gulp.watch('./app/**/*.scss', ['sass']); // if a change is made to a Sass file, recompile it Remove this task if you aren't using Sass
    gulp.watch(['./app/**/*', '!./app/**/*.{less,scss}'], browserSync.reload); // adjust (or remove) the ! glob if you're only using one (or neither) of LESS or Sass
})