gulp构建工具配置Less编译

　　　　　　　　　　　　　　　　　　gulp构建工具配置Less编译

 

gulp简介

gulp是前端开发过程中对代码进行自动化构建的利器，它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。

 

使用场景：

1. 合并优化压缩 css
2. 实时自动刷新
3. 压缩静态资源
4. 修改预处理样式后自动编译（SASS，Less）
5. 自动刷新浏览器
6. 资源文件 （图片、css、js）压缩
7. Autoprefixer
8. ESLint （检查代码质量）
9. rem移动端适配方案

 

?如果要使用gulp 搭建less编译需要进行一下步骤：

1. 全局安装 gulp：

npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

npm install --save-dev gulp

3.在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {

  // 将你的默认的任务代码放在这

  console.log("gulp正在执行一些操作...")

});

 

4. 运行 gulp：

gulp 

当然以上就是一个非常简单到安装和运行gulp到过程，如果需要编译less操作，还要继续?

---

5.在项目根目录下打开git工具，先在本项目下本地安装一个gulp -less

npm install gulp-less –save-dev

 

命令说明：–save-dev 该指令参数 ，将该包到信息保存到项目配置文件package.json 文件的开发环境依赖中。

6.安装完了gulp-less 就可以开始配置gulpfile.js 文件了。

a.配置编译一个文件：

var gulp = require('gulp');

    less = require('gulp-less');

​

gulp.task('Less', function () {

    gulp.src('src/less/index.less')

        .pipe(less())

        .pipe(gulp.dest('dist/css'));

});

 

直接运行以下命令开始编译

gulp Less

 

b.配置编译多个文件:

var gulp = require('gulp');

    less = require('gulp-less');

gulp.task('Less', function () {

    gulp.src(['src/less/index.less','src/less/detail.less']) //多个文件以数组形式传入

        .pipe(less())

        .pipe(gulp.dest('dist/css')); //将会在src/css下生成index.css以及detail.css 

});

 

c.配置匹配符“!”，“”，“*”，“{}”

 

var gulp = require('gulp');

    less = require('gulp-less');

​

gulp.task('Less', function () {

    //编译src目录下的所有less文件

    //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）

    gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']) 

        .pipe(less())

        .pipe(gulp.dest('dist/css'));

});

 

7.完成以上到过程就已经可以开始通过Less 任务去编译项目中使用的less文件了，如果需要压缩css文件,还需要调用其它模块来处理。

a.安装 gulp-minify-css

npm install gulp-minify-css --save-dev

 

b.配置gulpfile.js文件（示例）

var gulp = require('gulp'),

    less = require('gulp-less'),

     //确保本地已安装gulp-minify-css

    cssmin = require('gulp-minify-css');

​

gulp.task('Less', function () {

    gulp.src('src/less/index.less')

        .pipe(less())

        .pipe(cssmin()) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))

        .pipe(gulp.dest('src/css'));

});

 

c.当less有各种引入时，编译后不容易找到对应less文件，所以需要生成sourcemap文件，方便修改

  npm install gulp-sourcemaps --save-dev

 

配置 gulpfile.js

var gulp = require('gulp'),

    less = require('gulp-less'),

    sourcemaps = require('gulp-sourcemaps');

​

gulp.task('Less', function () {

    gulp.src('src/less/**/*.less')

        .pipe(sourcemaps.init())

        .pipe(less())

        .pipe(sourcemaps.write())

        .pipe(gulp.dest('src/css'));

});

写到这里基本上一个编译less到gulp配置就已经完成了，你会在使用到时候非常头疼，因为每一次修改都要去执行一次 gulp Less命令

 

那就再配置一个事件监听需要编译文件到变化，只要有文件更改就编译。

var gulp = require('gulp'),

    less = require('gulp-less'),

    sourcemaps = require('gulp-sourcemaps');

​

gulp.task('Less', function () {

    gulp.src('src/less/**/*.less')

        .pipe(sourcemaps.init())

        .pipe(less())

        .pipe(sourcemaps.write())

        .pipe(gulp.dest('src/css'));

     gulp.watch('src/**/*.less', ['Less']); //当所有less文件发生改变时，调用Less任务

});

 

配置到此，只要开始运行一次gulp Less 命令，每次只要less文件有改动，自动就会实现编译啦~~~?

 

转载于:https://www.cnblogs.com/Timor-M/p/9164132.html