Question

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

Answer 1

Gulp示例

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);
})

Answer 2

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

有一些工具可以为你完成工作 mac CodeKit Prepros for windows

我在Windows上使用预制黑板，非常酷

Answer 3

如果您使用Chrome，则可以使用Easy Auto Refresh。您还可以设置Grunt / Gulp来观看您的更改并与您的浏览器保持同步。

Answer 4

我认为@Rahul's list of tools会包含您正在寻找的内容，但@JustinRvt mentioned可以使用Gulp ...我目前在我的典型工作流程中使用Gulp，所以这是最合适的例子。

要真正理解这里发生的事情，并在计算机上安装Gulp，您需要阅读Gulp指南（我建议"Gulp for Beginners"; gulp-less文档是here，gulp-sass文档here和Browsersync文档here）。

它的工作方式是使用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

其中index.html有

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="styles-less.css">
  <link rel="stylesheet" href="styles-sass.css">
</head>

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
})

是否有一个工具可供前端开发人员在编写css时查看浏览器LIVE的更改？

4 个答案: