gulp 自动将less文件和sass文件编译成css文件，并能各种浏览器兼容

在一个项目的最外层建gulpfile.js，代码如下

var gulp = require ( 'gulp' ) ,
    less = require ( 'gulp-less' ) ,
    autoprefixer = require ( 'gulp-autoprefixer' );

var sass = require('gulp-sass');
//要监听的sass文件配置
gulp.task('sass', function(){
    gulp.src('.src/common/style/*.scss')  //引入项目下面存放sass文件的目录
    .pipe(sass())
    .pipe ( autoprefixer ( {
        browsers : [ 'last 2 versions' , 'Android >= 4.0' ] ,
        cascade : true , //是否美化属性值 默认：true 像这样：
        //-webkit-transform: rotate(45deg);
        // transform: rotate(45deg);
        remove : true //是否去掉不必要的前缀 默认：true
    } ) ).pipe ( gulp.dest ( './src/common/style' ) );

});   
//要监听的lass文件配置,这里是监听了./src/common/style文件夹下面的所有的less文件
gulp.task ( 'testLess' , function () {
    gulp.src ( './src/common/style/*.less' )
        .pipe ( less () )
        .pipe ( autoprefixer ( {
            browsers : [ 'last 2 versions' , 'Android >= 4.0' ] ,
            cascade : true , //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            // transform: rotate(45deg);
            remove : true //是否去掉不必要的前缀 默认：true
        } ) ).pipe ( gulp.dest ( './src/common/style' ) );
} );

//要监听的lass文件配置,这里是监听了我引入的mintui里面的所有样式文件
gulp.task ( 'testLess2' , function () {
    gulp.src ( './src/libs/mintui/*.less' )
        .pipe ( less () )
        .pipe ( autoprefixer ( {
            browsers : [ 'last 2 versions' , 'Android >= 4.0' ] ,
            cascade : true , //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            // transform: rotate(45deg);
            remove : true //是否去掉不必要的前缀 默认：true
        } ) ).pipe ( gulp.dest ( './src/libs/mintui' ) );
} );

//这个是 要启动的所有样式文件的路径 和上方定义好的名称，注意，名称一定要上下一致
gulp.task ( 'watch' , function () {
    gulp.watch ( './src/common/style/*.less' , [ 'testLess' ] );
    gulp.watch ( './src/libs/mintui/*.less' , [ 'testLess2' ] );
    gulp.watch('.src/common/style/*.scss',['sass']);
} );


gulp.task ( 'testAutoFx' , function () {
    gulp.src ( './src/common/style/*.css' ).pipe ( autoprefixer ( {
        browsers : [ 'last 2 versions' , 'Android >= 4.0' ] ,
        cascade : true , //是否美化属性值 默认：true 像这样：
        //-webkit-transform: rotate(45deg);
        // transform: rotate(45deg);
        remove : true //是否去掉不必要的前缀 默认：true
    } ) ).pipe ( gulp.dest ( './src/common/style' ) );
} );

启动的方式：gulp watch

例子：

less文件 编译前

image.png

less文件编译后，变成 css文件

image.png

启动：

image.png