Gulp 自动化构建

本文主要是介绍Gulp 自动化构建，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Gulp 自动化构建

use-gulp

官网

gulp 可以做什么?

编译 sass
合并优化压缩 css
校验压缩 js
优化图片
添加文件指纹（md5）
组件化头部底部（include html）
实时自动刷新…

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

通过各种插件, 配置任务task , 完成需要

安装

全局安装

npm install gulp -g
局部安装

npm i -D gulp

gulp的插件

这里列举比较常用的插件:

gulp-less // less文件编译成css
gulp-clean-css // 压缩css文件
gulp-csso // 压缩优化css
gulp-babel /// 将ES6代码编译成ES5。
gulp-uglify // 压缩js文件
gulp-imagemin // 压缩图片
gulp-html-minify // 压缩HTML
gulp-htmlmin // 压缩html
gulp-filter // 在虚拟文件流中过滤文件
gulp-concat // 合并文件
gulp-rename // 重命名文件
gulp-clean // 清理文件可以用 del 替代
gulp-notify // 当发生异常时提示错误
gulp-plumber // 当发生异常时提示错误

比较特殊的
- gulp-load-plugins

var $ = require('gulp-load-plugins')(); $ 是一个对象,加载了依赖里的插件 通过$.xxx使用插件

gulp-livereload // 网页自动刷新
gulp-webserver // 本地服务器

参考网站
https://blog.csdn.net/qq_27626333/article/details/78006271

gulp插件网站
https://gulpjs.com/plugins/

gulp api

gulp.src( )

一般直接写文件路径, 通过 * 通配符来通配全部文件

gulp.dest(path[, options])

输出到文件夹 , 文件夹不存在将会自动创建

gulp.task(name[, deps], fn)

核心 , 配置一个任务执行一连续的操作

name
任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

deps
类型： Array
一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。

fn
该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.watch( )

gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb]

监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});// 其他写法gulp.watch('js/**/*.js', function(event) {console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

配置任务

这里以使用gulp-less文件编译less文件做例子

在项目根路径下创建gulpfile.js 文件


var gulp = require('gulp')// less文件编译成css
var less = require('gulp-less') gulp.task('lessTask', function() {// 链式编程 以流的形式传递数据gulp.src('src/less/*.less') // 找到文件.pipe(rename({ suffix: '.min' })) // 重命名.pipe(less()) // 将less文件编译成css.pipe(gulp.dest('dist/css')) // 输出 将会在dist/css下生成index.css
});gulp.task('default',[ 'htmlminTask']); // 默认任务 , gulp 默认执行

可以通过 gulp lessTask 执行任务

如果在添加到默认任务中, 直接gulp执行

异步或同步执行

在task中是否使用return来决定是异步还是同步

const gulp = require('gulp');
// 没有使用return
gulp.task('js',function () {gulp.src('src/js/*.js')...
})gulp.task('css',function () {gulp.src('src/js/*.js')...
})gulp.task('html',function () {gulp.src('src/js/*.js')...
})gulp.task('default', ['js', 'css', 'html']);

执行结果

上一个任务完成才执行下一个

然后加上return

const gulp = require('gulp');// 使用return
gulp.task('js', function () {return gulp.src('src/js/*.js')
})
gulp.task('css', function () {return gulp.src('src/js/*.js')
})
gulp.task('html', function () {return gulp.src('src/js/*.js')
})gulp.task('default', ['js', 'css', 'html']);

执行结果

结果显然是异步的

不想全部同步 , 但是个别任务是要同步顺序执行怎么办?

// less文件转化为css文件
gulp.task('less', function () {return gulp.src('src/less/*.less').pipe($.less()).pipe(gulp.dest('src/css/'))
});// 添加前置任务 这样less任务执行完 才会执行css任务
// 执行css任务 都是自动先执行完less任务
gulp.task('css', ['less'], function () {return gulp.src('src/css/*.css')// .pipe($.concat('build.css')) // 合并成一个文件.pipe($.rename({suffix: ".min"})).pipe($.cleanCss()).pipe(gulp.dest('dist/css/'))
});

gulp 自动刷新

一个自动化构建工具
怎么可以少了 watch 和自动刷新

自动刷新的插件是 gulp-livereload 本地服务器可以用 gulp-webserver 或者 gulp-connect 都可以

这里就演示用gulp-webserver和gulp-conncet

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
// 使用 open 自动打开一个网址
const open = require('open');
gulp.task('css', function()){return gulp.src('src/css/*.css').pipe(gulp.dest('dist/css/')).pipe($.livereload()).pipe($.connect.reload())
}
gulp.task('server', ['default'], function () {$.connect.server({root: 'dist/',livereload: true,port: 8080});open('http://localhost:8080');gulp.watch('src/css/*.css', ['css']);
});