前端自动化构建-gulp自动编译less文件

直接正题:(mac环境)

1、全局安装gulp,之所以全局安装,是为了使用gulp命令,如果不使用,也可以不安装

$ cnpm install --global gulp

2、进入到项目根目录(本例是node),是作为项目的依赖安装

$ cnpm install --save-dev gulp

测试一下是否安装成功了,可以直接运行gulp

3、安装less编译插件gulp-less

$ cnpm install gulp-less --save-dev

4、根目录下新建gulpfile.js,文件内容如下:

var gulp = require('gulp'), 
    less = require('gulp-less')
 
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
    gulp.src(['./src/less/**/*.less','!./src/less/**/mixin.less']) //编译less目录下所有.less文件,除了mixin.less
        .pipe(less()) //通过less插件进行编译
        .pipe(gulp.dest('./src/css')); //指定less的保存位置,css的名称和less一样
});

此时可以用命令生成编译了

$ gulp testLess

看看,是不是指定目录已经有了编译后的css文件

5、此时的css文件是没有经过压缩的,我们要压缩一下,用到gulp-minify-css这个插件,首先安装它

$ cnpm install gulp-minify-css --save--dev

然后回到gulpfile.js,引入这个压缩插件,并在less编译之后,进行压缩

var gulp = require('gulp'), 
    less = require('gulp-less')
    mincss = require('gulp-minify-css')
 
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
    gulp.src(['./src/less/**/*.less','!./src/less/**/mixin.less']) //编译less目录下所有.less文件,除了mixin.less
        .pipe(less()) //通过less插件进行编译
        .pipe(mincss()) // 压缩编译后的代码
        .pipe(gulp.dest('./src/css')); //指定less的保存位置,css的名称和less一样
});

6、less文件发生变化时,自动编译。用到gulp的watch监听方法

在前面代码的基础上,代码的末尾添加:

gulp.task('watchLess', function () {
    gulp.watch('./src/less/**/*.less',['testLess']) // 当less文件发生改变时,自动执行testLess任务   
})

此时改变了less文件并没有自动编译,需要运行 watchLess 这个任务

$ gulp watchLess

至此,就可以牛逼闪闪的去写less了

7、sublime text3 插件gulp

sublime安装插件gulp,安装后,右键gulpfile.js,就能执行指定任务,而且还能看到更多信息,挺爽

gulp-less.png


补充:

1、自动添加浏览器厂商兼容前缀

插件名称:gulp-autoprefixer

$ cnpm install gulp-autoprefixer --save-dev
.pipe(autoprefixer({
    browsers: ['last 2 versions', 'Android >= 4.0'],
    cascade: true, //是否美化属性值 默认:true 像这样:
    //-webkit-transform: rotate(45deg);
    //        transform: rotate(45deg);
    remove:true //是否去掉不必要的前缀 默认:true 
}))

注意:此pipe要在less之后,mincss之前

坑:如果参数cascade设为false,会无效

2018-01-11

0 个评论