本文共 3298 字，大约阅读时间需要 10 分钟。

Gulp与Less入门教程

一、Gulp的概念

Gulp是一种自动化构建工具，能够通过代码实现全自动编译、压缩、监测等功能。它是一款灵活高效的任务化工具，基于数据流操作，所有操作均在内存完成。

二、Gulp的特点

三、安装

npm init

npm install gulp-cli -g

npm install gulp@3 --save-dev

gulp -v

四、Gulp的使用

1. 注册事件

示例代码：

gulp.task('事件名', function() {})

2. 执行默认事件

默认事件通过gulp.task('default', [])设置，执行所有注册的任务。

五、Gulp的具体应用

1. JavaScript文件处理

安装插件：

npm install gulp-concat gulp-uglify gulp-rename --save-dev

示例代码：

var gulp = require('gulp');  
var concat = require('gulp-concat');  
var uglify = require('gulp-uglify');  
var rename = require('gulp-rename');  
gulp.task('js', function() {  
  return gulp.src('js/*.js')  
    .pipe(concat('bundle.js'))  
    .pipe(gulp.dest('dist/js/'))  
    .pipe(uglify())  
    .pipe(rename({ suffix: '.min' }))  
    .pipe(gulp.dest('dist/js/'));  
});  
gulp.task('default', []);

运行命令：

gulp js

2.Less文件处理

安装插件：

npm install gulp-less gulp-clean-css --save-dev

示例代码：

var gulp = require('gulp');  
var less = require('gulp-less');  
var cleanCss = require('gulp-clean-css');  
gulp.task('less', function() {  
  return gulp.src('less/*.less')  
    .pipe(less())  
    .pipe(gulp.dest('css/'));  
});  
gulp.task('default', []);

运行命令：

gulp less

3. CSS文件处理

安装插件：

npm install gulp-clean-css --save-dev

示例代码：

var gulp = require('gulp');  
var cleanCss = require('gulp-clean-css');  
gulp.task('css', function() {  
  return gulp.src('css/*.css')  
    .pipe(cleanCss({ compatibility: 'ie8' }))  
    .pipe(rename({ suffix: '.min' }))  
    .pipe(gulp.dest('dist/css/'));  
});  
gulp.task('default', []);

运行命令：

gulp css

4.图片文件处理

安装插件：

npm install gulp-imagemin --save-dev

示例代码：

var gulp = require('gulp');  
var imagemin = require('gulp-imagemin');  
gulp.task('images', function() {  
  return gulp.src('img/*')  
    .pipe(imagemin())  
    .pipe(gulp.dest('dist/img/'));  
});  
gulp.task('default', []);

运行命令：

gulp images

六、异步与同步任务

1. 异步任务

通过将事件传入默认事件的参数数组中实现：

gulp.task('default', ['js', 'less', 'css']);

2. 同步任务

去掉回调函数的return语句：

gulp.task('default', ['js', 'less', 'css']);

七、半自动编译

安装插件：

npm install gulp-livereload --save-dev

示例代码：

var gulp = require('gulp');  
var livereload = require('gulp-livereload');  
gulp.task('watch', ['default'], function() {  
  livereload.listen();  
  gulp.watch('js/*.js', ['js']);  
  gulp.watch(['css/*.css', 'less/*.less'], ['css']);  
});  
gulp.task('default', []);

运行命令：

gulp watch

八、全自动编译与自动打开

安装插件：

npm install gulp-connect --save-dev  
npm install open --save-dev

示例代码：

var gulp = require('gulp');  
var connect = require('gulp-connect');  
var open = require('open');  
gulp.task('server', ['default'], function() {  
  connect.server({  
    root: 'dist/',  
    livereload: true,  
    port: 6672  
  });  
  open('http://localhost:6672/');  
  gulp.watch('js/*.js', ['js']);  
  gulp.watch(['css/*.css', 'less/*.less'], ['css']);  
});  
gulp.task('default', []);

运行命令：

gulp server

九、总结

1.搭建sass环境

安装命令：

npm rebuild node-sass  
npm install gulp-sass --save-dev

2.命令汇总

安装依赖：

npm install gulp-cli -g  
npm install gulp@3 --save-dev  
npm install gulp-livereload gulp-connect gulp-sass --save-dev  
npm rebuild node-sass  
npm install gulp-sass --save-dev

常用命令：

gulp sass  
gulp server

通过以上命令，你可以轻松搭建Gulp和Less的开发环境，实现自动化构建和开发。