フロントエンドの開発者がCSSのコーディング中にLIVEの変更を見るためのツールはありますか？

Question

通常、css/scss/lessをコード化して変更すると、最新の変更を見るためにブラウザをリフレッシュする必要があります。デュアルモニタの設定があります。ブラウザを設定すると便利です特定のツール/ IDEを使用すると、ページを更新することなく、変更をブラウザで確認できます。

Answer 1

Chromeをお持ちの場合は、Easy Auto Refreshを使用できます。 また、Grunt/Gulpを設定して、ブラウザを変更してブラウザーのライフシンクを設定することもできます。

Answer 2

あなたはいくつかのツールがありますがlivereload

を使用することができ、あなたのテキストエディタとして崇高使用している場合は、Windows上でpreprosを使用して

イムのMAC
Preprosため
CodeKitようにあなたのために仕事をします窓とその非常に涼しい

Answer 3

ガルプの例

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 4

@Rahul's list of toolsのように見えますが、@JustinRvt mentionedを使用することができます。Gulp ...私は現在、通常のワークフローでGulpを使用していますので、ここではどのように動作するのかについての最も基本的な例があります。

ここで何が起こっているかを本当に理解するために、そしてがぶ飲みがコンピュータにインストールされますし、あなたがガルプガイド読ん必要があります（私は"Gulp for Beginners"をお勧めします。gulp-lessドキュメントはhereで、gulp-sassドキュメントhere、およびBrowsersyncドキュメントhereを）。

それが動作する方法は、あなたが、ローカルサーバー上のサイトを実行するためにBrowsersyncを使用して、あなたのスタイルシートへの変更のためのgulp時計（複数可）を持っている、とページをリロードするgulpのいずれかの変化を検出するたびにBrowsersyncを教えていますそれら。

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