gulp构建工具配置Less编译
gulp构建工具配置Less编译
gulp简介
gulp是前端开发过程中对代码进行自动化构建的利器，它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。
使用场景：
- 合并优化压缩 css
- 实时自动刷新
- 压缩静态资源
- 修改预处理样式后自动编译（SASS，Less）
- 自动刷新浏览器
- 资源文件 （图片、css、js）压缩
- Autoprefixer
- ESLint （检查代码质量）
- 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
写到这里基本上一个编译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文件有改动，自动就会实现编译啦~~~😄
