Gulp
Gulp
gulp常用插件列表
- gulp-uglify //使用uglify()函数,压缩代码,只能压缩js
- gulp-concat //使用concat()函数,合并代码
- gulp-autoprefixer //使用autoprefixer(),自动为css3属性添加浏览器私有前缀
- gulp-csso //压缩css代码
- gulp-html-minify //压缩html文件,去掉html文件的换行空格等
- gulp-html-replace //用来替换html中的构建块
- gulp-base64 //将小图片转换为base64码
- gulp-less //编译less为css
gulp的初步了解
gulp是一个自动化构建工具,在项目开发阶段或部署阶段执行一些自动化任务。
gulp可以帮我们将书写的代码比那位真正可在生产环境中部署的代码,是实现自动化工作流的主要工具。
gulp的优点
- 流式构建系统
- 插件众多
- 使用JavaScript配置
- 底层的计算非常快
- 可以并行执行任务
- 可以创造完整的构建体系
gulp相对于grunt的优势
gulp跟grunt一样支持跨平台,即支持跨平台不是gulp独有的优势,不同在于grunt需要Gruntfile.js,gulp需要Gulpfile.js,最核心的不同之处在于,gulp是以流为核心的,而grunt是以配置加上文件io为核心的。
gulp的安装
- 先安装nodejs环境,npm包管理系统就可以使用了
- 运行命令npm install -g gulp-cli在npm上下载,并全局安装gulp,让gulp成为命令行接口,就可在命令行中直接使用gulp命令
- 运行命令npm init创建pakeage.json文件,相当于“身份证文件”
- 运行命令npm install --save gulp,将gulp进行本地安装,全局和本地都安装了,才能使用。
注意,因为是国外资源,安装时可使用cnpm淘宝镜像来安装。
gulpfile配置文件
- gulpfile.js文件指导gulp工作
- gulpfile文件中定义多个task,通常向外使用exports关键字
- 这些task可以被gulp 任务名命令运行,默认的task叫做default,它可以被gulp命令运行
以下是gulpfile.js示例:
// 定义一个个task,task就是普通的函数 function task1() { console.log('我是task1!'); return;// 必须有return,否则gulp会认为任务没有执行完毕 } function task2() { console.log('我是task2!'); return;// 必须有return,否则gulp会认为任务没有执行完毕 } function task3() { console.log('我是task3!'); return;// 必须有return,否则gulp会认为任务没有执行完毕 } // 向外暴露 exports.t1 = task1; exports.task2 = task2; exports.t3 = task3; // 外部使用就是gulp t1 // gulp task2 // 默认暴露 exports.default = task3;// 直接在命令行gulp直接运行
流的使用
- 流是从一个源(source)流向一个终点(destination)的数据的序列
- gulp中,src()函数创建可读流,dest()函数创建可写流。这两个函数组成基本的task
- 流创建成功后,需要使用管道pipe()函数将流导入特定的处理方法。dest()函数也是其中的方法之一。
以下是使用流的gulpfile.js的代码示例:
// 引入gulp文件,require表示引入,解构出三个函数 const {src, dest, pipe} = require("gulp"); // 定义task function task1() { // src表示设置流的源头 return src("./foo/**/*.txt") // 这里的一个*代表任意名字,**代表任意目录,也就是所有目录,所有文件 // pipe表示管道,pipe()里面写函数 // dest表示设置流的终点 .pipe(dest("./bar")); } // 暴露 exports.default = task1;
gulp插件基本使用
- 每个gulp插件都是一个函数,要将它放入pipe()函数中
- pipe()管道可以链式调用(连续打点使用)
gulp使用各种插件的示例:
// 引入gulp文件,require表示引入,解构出三个函数 const {src, pipe, dest, parallel} = require('gulp'); // 引入插件 const uglify = require('gulp-uglify'); const concat = require('gulp-concat'); const autoprefixer = require('gulp-autoprefixer'); const csso = require('gulp-csso'); const htmlMinify = require('gulp-html-minify'); const htmlReplace = require('gulp-html-replace'); const base64 = require('gulp-base64'); function js() { return src('./app/js/**/*.js') .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(dest('./dest/js')); } function css() { return src('./app/css/**/*.css') .pipe(base64({ extentions: ['png'], maxImageSize: 500*1024 // bytes 转换图片的最大尺寸 })) .pipe(autoprefixer({ browsers: ['last 2 version', '> 5%', 'firefox > 10', 'ie 6-8'] })) .pipe(csso()) .pipe(concat('all.min.css')) .pipe(dest('./dest/css')); } function html() { return src('./app/index.html') .pipe(htmlReplace({ css: './css/all.min.css', // 需要在html文件中的link标签开头添加<!-- bulid:css -->和结尾添加<!-- endbuild --> js: './js/all.min.js' //js和css同理,改为bulid:js })) .pipe(htmlMinify()) .pipe(dest('./dest')); } // 暴露 exports.default = parallel(js, css, html);
平行运行多个task
- parallel函数用来平行运行多个task
- 平行运行的task没有先后之分,谁先谁后没有关系
使用watch()函数实时监控文件变化