1.关于gulp
gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。
在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。
2.安装 Node 和 gulp
gulp 是基于 node 实现的，那么我们就需要先安装 node。
Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现 Web服务，做类似PHP的事。
由于node的安装在之前的博客里进行过详细介绍了，这里就不在叙述。
安装 gulp
npm 是 node 的包管理工具，可以利用它安装 gulp 所需的包。（在安装 node 时已经自动安装了 npm）
在命令行输入
npm install -g gulp
注意：在工程中生成package.json文件，并安装gulp至依赖
cnpm install gulp --save-dev
最后在工程目录下创建gulpfile.js文件。
所有的工作（压缩、混淆、重命名…）都需要在此文件中进行配置。
注意：所有的功能都需要使用插件（基于gulp开发的插件）来完成工作。
3.使用 gulp 压缩 JS
安装 gulp-uglify模块
npm install gulp-uglify
一、在gulpfile.js 中编写代码
// 获取 gulp
var gulp = require('gulp')
// 获取 uglify 模块（用于压缩 JS）
var uglify = require('gulp-uglify')
// 压缩 js 文件
// 在命令行使用 gulp min-js 启动此任务
//参数一：任务名
gulp.task('min-js', function() {
// 1\. 找到文件
gulp.src('js/index.js')
// 2\. 压缩文件
.pipe(uglify())
// 3\. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
4.使用 gulp 压缩 CSS
安装 gulp-minify-css模块
npm install gulp-minify-css
一、在gulpfile.js 中编写代码
扫描二维码关注公众号，回复：
10556798 查看本文章
// 获取 gulp
var gulp = require('gulp')
// 获取 minify-css 模块（用于压缩 CSS）
var minifyCSS = require('gulp-minify-css')
// 压缩 css 文件
// 在命令行使用 gulp css 启动此任务
gulp.task('css', function () {
// 1\. 找到文件
gulp.src('css/index.css')
// 2\. 压缩文件
.pipe(minifyCSS())
// 3\. 另存为压缩文件
.pipe(gulp.dest('dist/css'))
})
5.使用 gulp 压缩图片
安装 gulp-imagemin模块
npm install gulp-imagemin
一、在gulpfile.js 中编写代码
var gulp = require('gulp');
// 获取 gulp-imagemin 模块
var imagemin = require('gulp-imagemin')
// 压缩图片任务
// 在命令行输入 gulp images 启动此任务
gulp.task('images', function () {
// 1. 找到图片
gulp.src('images/1.jpg')
// 2. 压缩图片
.pipe(imagemin({
progressive: true
}))
// 3. 另存图片
.pipe(gulp.dest('dist/images'))
});
6.使用 gulp 编译 LESS
安装 gulp-less模块
npm install gulp-less
一、在gulpfile.js 中编写代码
// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-less 模块
var less = require('gulp-less')
// 编译less
// 在命令行输入 gulp images 启动此任务
gulp.task('less', function () {
// 1. 找到 less 文件
gulp.src('less/**.less')
// 2. 编译为css
.pipe(less())
// 3. 另存文件
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('less/**.less', ['less'])
})
7.使用 gulp 编译 Sass
安装 gulp-ruby-sass模块
gulp-ruby-sass
一、在gulpfile.js 中编写代码
// 获取 gulp
var gulp = require('gulp')
// 获取 gulp-ruby-sass 模块
var sass = require('gulp-ruby-sass')
// 编译sass
// 在命令行输入 gulp sass 启动此任务
gulp.task('sass', function() {
return sass('sass/')
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest('dist/css'))
});
// 在命令行使用 gulp auto 启动此任务
gulp.task('auto', function () {
// 监听文件修改，当文件被修改则执行 images 任务
gulp.watch('sass/**/*.scss', ['sass'])
});
8.使用 gulp 执行多个任务及压缩多个文件
一、在gulpfile.js 中编写代码
gulp.task('min-js', function() {
// 1\. 找到文件
//使用*去匹配JS下的所有文件进行批量压缩
gulp.src('js/*.js')
// 2\. 压缩文件
.pipe(uglify())
// 3\. 另存压缩后的文件
.pipe(gulp.dest('dist/js'))
})
// 使用 gulp.task('default') 定义默认任务
// 在命令行使用 gulp 启动 js 任务、css任务和 img 任务
gulp.task('default').gulp.series('min-js','css-min','img-min')
