本文主要是介绍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']);
});
输入 gulp server 启动一下即可
这里就不演示了
这篇关于Gulp 自动化构建的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
