gulp 实现自动刷新并简单配置

/*使用前必须安装gulp-less/liverload/autoprefixer*/

/*1.gulpfile.js*/

var gulp = require('gulp'),
    less = require('gulp-less'),
    livereload = require('gulp-livereload'),//实现样式自动刷新
    autoprefixer = require('gulp-autoprefixer');//实现版本自动添加前缀
 
/*less*/
gulp.task('less', function() {
    gulp.src('less/*.less')
        .pipe(less())
        .pipe(gulp.dest('css/'))
        .pipe(livereload());//自动刷新
});
/*自动加前缀*/
gulp.task('autoprefixer', function () {
    gulp.src('css/*.css')
        .pipe(autoprefixer({
            browsers: ["last 2 versions","Firefox >= 20"],
            /*last 2 versions: 主流浏览器的最新两个版本
            ● last 1 Chrome versions: 谷歌浏览器的最新版本
            ● last 2 Explorer versions: IE的最新两个版本
            ● last 3 Safari versions: 苹果浏览器最新三个版本
            ● Firefox >= 20: 火狐浏览器的版本大于或等于20
            ● iOS 7: IOS7版本
            ● Firefox ESR: 最新ESR版本的火狐
            ● > 5%: 全球统计有超过5%的使用率
            3.3、发现上面规律了吗，相信这不难看出，接下来说说各浏览器的标识：
            Android ==> Android WebView.
            BlackBerry or bb ==> Blackberry browser.
            Chrome ==> Google Chrome.
            Firefox or ff ==> Mozilla Firefox.
            Explorer or ie ==> Internet Explorer.
            iOS or ios_saf ==> iOS Safari.
            Opera ==> Opera.
            Safari ==> desktop Safari.
            OperaMobile or op_mob ==> Opera Mobile.
            OperaMini or op_mini ==> Opera Mini.
            ChromeAndroid or and_chr
            FirefoxAndroid or and_ff ==> Firefox ==> Android.
            ExplorerMobile or ie_mob ==> Internet Explorer Mobile.
            */
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-trans==>m: rotate(45deg);
            //        trans==>m: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(gulp.dest('css/'));
});

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('less/*.less', ['less']);
    gulp.watch('css/*.css', ['autoprefixer']);
});

 

/*2.html在头部引入liverload.js*/

document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')

/*3.浏览器下载插件liverload*/

/*4.使用自动刷新的话必须是服务器的方式打开，不能直接双击打开哦*/

 

重启浏览器，试试在less文件中更改样式吧。很神奇对吧，竟然自动刷新了