gulp前端工程化教程
gulp
npm install -g gulp-concat 文件打包
npm install -g gulp-rename 文件重命名
npm install -g gulp-imagemin 图片压缩
npm install -g gulp-jslint js代码校验 慎用
npm install -g gulp-minify-css css压缩
npm install -g gulp-minify-html html压缩
npm install -g gulp-uglify js压缩
它是一个前端工程化工具,用来实现代码部署,css,javascript,html等代码的压缩,es6,less,styls等代码的编译,图片优化等;
它的实现:是基于UXIx中管道概念,nodejs中有个叫stream流,前一个操作的输出作为后一个操作的输入;
压缩CSS文件,第一个过程是获取文件,将这个文件转化成一个stream流,第二个过程将文件内容进行压缩,这个文件内容就是通过一个操作流入过来;第三个过程就是将文件写入一个文件中,可以是一个新的文件,也可以是当前文件;
Stream流:nodejs中读取文件,得到结果是一个流,这种流中包含文件的信息,包括文件名称、内容、编码、路径等等都在流中;
是为了写入或者更改来实现,使我们操作文件实现阶段化,
gulp的优势:
1. api简单:src,dest,task,pipe;
2. 插件资源丰富,社区庞大,开发插件也很简单;
全局安装:
npm install gulp -g
查看是否安装成功:
gulp -v
项目根目录下安装:
配置package.json:
npm init
安装gulp:
npm install gulp --save-dev
安装gulp插件:
npm install gulp-less --save-dev
新建入口文件:
gulpfile.js, 这个文件很重要,每个项目都要有这个文件,这个是当执行gulp会自动执行该文件,该文件中我们可以书写gulp语句,基于js实现,与js语法一样的;
运行gulp:
gulp 任务名称
Task方法
用来定义一个任务,
语法gulp.task(name[,deps],fn)
name:表示任务的名称
deps:表示任务的依赖任务,可选参数;
fn:任务的回调函数
运行gulp中task用run方法 :
语法: gulp.run(taskname);
taskname:表示任务的名称;
在最新的gulp版本中,run方法不建议使用,我们可以通过默认任务来实现
语法:gulp.task('default',deps,fn)
注意默认任务的名称就是default,不能写其他的名字,如果写其他的名字就会被当做普通任务来执行;
deps:依赖的任务集合;
fn:执行回调函数;
// gulpfile
var gulp = require('gulp');
gulp.task('demo',function(){
console.log('demo task')
})
gulp.task('default',['demo'],function(){
console.log('default task')
})
cmd输出
D:\MyPro\GULP\03default>gulp
[00:15:05] Using gulpfile D:\MyPro\GULP\03default\gulpfile.js
[00:15:05] Starting 'demo'...
demo task
[00:15:05] Finished 'demo' after 267 μs
[00:15:05] Starting 'default'...
default task
[00:15:05] Finished 'default' after 101 μs
依赖的任务要先于当前任务执行;
μs:微秒;
在一个项目中,我们要批量的处理文件,
gulp.src为我们提供这样的方法:将文件转换成stream流;
语法,gulp.src(filePath,option)
filePath:文件的路径,如果多个不同的文件,我们有两种方法显示
一种是数组形式['a.js','b.css']
一种是glops表达式,['*.js'] 表示a.js , b.js , c.js但是一定不能有目录符号‘/’;
option:一般默认
.pipe,我们可以通过管道方法来处理每个阶段的流,这些管道依次排开,前一个管道的输出作为后一个管道的输入,对流执行,链式调用;
语法 .pipe(fn)
fn:通常表示处理方法;
比如我们将一个文件放到另外一个目录下:
gulp.pipe(gulp.dest(path));
gulp.dest方法表示将文件写入某个目录:
语法,gulp.dest(path)
path:路径,目录路径
//读取js中的index.js文件
//将index.js文件放到dest目录下
//引入gulp模块
var gulp = require('gulp');
//定义一个读写index.js的任务
gulp.task('dealIndex',function(){
//读取Index文件
gulp.src('js/index.js')
//通过管道操作这个流
//将文件内容放到dest文件夹内
.pipe(gulp.dest('dest'))
})
//启动默认任务来执行dealIndex任务
gulp.task('default',['dealIndex'])
cmd:
D:\MyPro\GULP\04读写>gulp
[00:57:47] Using gulpfile D:\MyPro\GULP\04读写\gulpfile.js
[00:57:47] Starting 'dealIndex'...
[00:57:47] Finished 'dealIndex' after 15 ms
[00:57:47] Starting 'default'...
[00:57:47] Finished 'default' after 30 μs
文件监听
我们在开发中想边开发边发布,gulp提供了一个方法叫watch来监视文件变化,来实现实时发布;
文件在写入、修改、删除时发生一个操作就是保存文件;
watch方法的语法
第一种: gulp.watch(globs,fn);
globs: 表示文件的路径
* 代表任意字符,除了目录符号/和拓展名.js .css .html等,可以: .js a.js abc.js
** 代表任意字符,可以包括目录符号哦,但是不能包括拓展名.js .css等,可以:/a.js
混合使用:/.js 包含所有的js文件
lib/*/.js lib文件夹下面的所有js文件
fn:有个参数表示文件对象,有两个属性:
type:操作的类型,changed,deleted,added
path:操作的文件,D:\MyPro\GULP\05文件监听\js\index.js
第二种:gulp.watch(globs,deps);
golbs:表示文件的路径
deps:表示任务task集合
案例一:
我们监听js文件下文件到demo的输出
// 监听Index.js的变化,发布到demo文件夹下
var gulp = require('gulp');
gulp.task('default')
gulp.watch('js/*.js',function(e){
console.log(e)
//将js下面的js文件放入demo文件夹下
gulp.src('js/*.js')
.pipe(gulp.dest('demo'))
})
cmd输出,下面的对象是console.log(e)
D:\MyPro\GULP\05文件监听>gulp
[01:32:54] Using gulpfile D:\MyPro\GULP\05文件监听\gulpfile.js
[01:32:54] Starting 'default'...
[01:32:54] Finished 'default' after 158 μs
{ type: 'changed',
path: 'D:\\MyPro\\GULP\\05文件监听\\js\\index.js' }
{ type: 'deleted',
path: 'D:\\MyPro\\GULP\\05文件监听\\js\\demo.js' }
{ type: 'changed',
path: 'D:\\MyPro\\GULP\\05文件监听\\js\\index.js' }
{ type: 'added', path: 'D:\\MyPro\\GULP\\05文件监听\\js\\demo.js' }
{ type: 'changed',
path: 'D:\\MyPro\\GULP\\05文件监听\\js\\demo.js' }
案例二
var gulp = require('gulp');
gulp.task('demo',function(){
console.log('demo task')
})
gulp.task('dealJs',function(){
gulp.src('js/*.js')
.pipe(gulp.dest('demo'))
})
gulp.task('default');
gulp.watch('js/*.js',['dealJs','demo'])
gulp
只是一个工具的抽象,它把基本的功能抽取出来,例如,读取文件,写入文件,创建管道,监听文件,创建任务;
但是如何在管道中处理这些stream流,没有实现,因为操作stream太复杂了,es6变成js,将less变成css,文件打包,文件压缩等等,这些不是一两个方法就能解决;因此把这些业务逻辑抽取出来作为插件使用,任何人都可以开发插件,
好处:插件多样性,每个人都可以有自己的一个插件,这样使得我们gulp包很小,
问题:想使用一个功能,没有一个很好的指引,
插件如何使用
- 安装插件包,npm install -g gulp-rename (修改文件名插件),可以复制到自己目录下;
- 在gulpfile.js中将该模块引入进来,通过require;
- 然后通过管道方法pipe使用
例子:重命名
//将js中的index.js文件放到demo文件夹中,并且命名为app.js
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('renameJs',function(){
gulp.src('js/index.js')
.pipe(rename('app.js'))
.pipe(gulp.dest('demo'))
})
gulp.task('default',['renameJs'])
js文件的压缩
gulp-uglify
- 安装插件
- 在gulpfile.js引入该模块
- 在pipe方法中执行该方法
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglifyJs',function(){
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('demo'))
})
gulp.task('default',['uglifyJs'])
css压缩
gulp-minify-css
var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');
gulp.task('minifyCssNow',function(){
gulp.src('css/*.css')
.pipe(minifyCss())
.pipe(gulp.dest('demo'))
})
gulp.task('default',['minifyCssNow'])
html文件压缩
gulp-minify-html
var gulp = require('gulp');
var minifyHtml = require('gulp-minify-html');
gulp.task('miniFy',function(){
gulp.src('./*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('demo'))
})
gulp.task('default',['miniFy'])
Vue项目实战
- 将html压缩
- 将css压缩
- 将js压缩
//我们要压缩css js html 依赖三个插件
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var minifyHtml = require('gulp-minify-html');
//对三类文件压缩并放到压缩文件夹下
gulp.task('jsUglify',function(){
gulp.src('10/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('demo/js'))
})
gulp.task('cssMinify',function(){
gulp.src('10/css/*css')
.pipe(minifyCss())
.pipe(gulp.dest('demo/css'))
})
gulp.task('htmlMinify',function(){
gulp.src('10/*.html')
.pipe(minifyHtml())
.pipe(gulp.dest('demo/'))
})
gulp.task('dealImage',function(){
gulp.src('10/img/**/*.*')
.pipe(gulp.dest('demo/img'))
})
gulp.task('dealData',function(){
gulp.src('10/data/*.json')
.pipe(gulp.dest('demo/data'))
})
gulp.task('default',['jsUglify','cssMinify','htmlMinify','dealImage','dealData'])
文件打包
开发时我们可能会有几十个文件,我们上线时会打包成一个文件
gulp-concat实现文件打包,使用方式和uglify一样,只不过concat方法需要传递一个参数,这个参数表示打包后的文件名称;
//将js文件夹中的js文件打包
var gulp = require('gulp');
var concat = require('gulp-concat');
//获取js中的Js文件并且打包在一起
gulp.task('jsConcat',function(){
gulp.src('js/*.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('demo'))
})
gulp.task('default',['jsConcat'])
js代码校验
gulp-jslint 实现对JS代码校验
图片压缩
gulp-imagemin
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('dealImage',function(){
gulp.src('img/*.*')
.pipe(imagemin())
.pipe(gulp.dest('demo'))
})
gulp.task('default',['dealImage']
可见对Png格式的图片压缩效果最好
gulp前端工程化教程的更多相关文章
- webpack4前端工程化教程(一)
-本文作为webpack小白入门文章,会详细地介绍webpack的用途.具体的安装步骤.注意事项.一些基本的配置项,并且会以一个具体的项目实例来介绍如何使用webpack.另外,本文会简单地介绍一些最 ...
- 前端自动化构建工具——gulp环境搭建教程
gulp是前端工程化的工具,它可以对html,css,js等代码和图片进行压缩,也可以对sass和less等预处理语言进行编译,代码部署.gulp学起来简单,用起来方便,大大提高我们工作效率. 这里可 ...
- [转]基于gulp和webpack的前端工程化
本文样例代码 :https://github.com/demohi/learning-gulp 本文主要简单介绍一下基于gulp和webpack的前端工程化. 技术栈 React.js reFlux ...
- 10分钟学会前端工程化(webpack4.0)
一.概要 1.1.前端工程化 随着前端的不断发展与壮大,前端变得越来越复杂,组件化.模块化.工程化.自动化成了前端发展中不可或缺的一部分,具体到前端工程化,面临的问题是如何提高编码->测试-&g ...
- gulp详细入门教程
本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...
- 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML(转)
1.什么是工程化开发 软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行 ...
- gulp 前端自动化工具
一开篇 在前端开发的过程中,我们经常会碰到压缩.合并.图片script 等,于是就有了gulp 前端自动化构建工具,它能帮你在前端开发中,节省时间. 1,安装 node.js 因为gulp 构建工具是 ...
- 前端工程化(三)---Vue的开发模式
从0开始,构建前后端分离应用 导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord ...
- 前端工程化系列[04]-Grunt构建工具的使用进阶
在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt ...
随机推荐
- 时间戳time
时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日开始按秒计算的偏移量(time.gmtime(0))此模块中的函数无法处理1970纪元年以前的时间或太遥远的未来(处理极 ...
- visual studio code运行时报错,无法将“cnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称,Cannot find module 'webpack'
前言 因公司技术需求,这段时间成功进入了Vue 2.0 的坑,刚用起Visual Studio Code,却发现问题很多,发现一个错误:cnpm : 无法将“cnpm”项识别为 cmdlet.函数.脚 ...
- Maven 那点事儿(转)
0. 前言 Jason Van Zyl,在 Java 十大风云人物排行榜上或许会看到他. 这兄弟是干嘛的? 他就是 Maven 的创始人,人们都尊称他为“Maven 他爸”. 毋庸置疑,Jason 也 ...
- python 数据分析2
本节概要 Numpy详解 安装 Numpy的安装已经不想多说..在确保pip或pip3的路径被添加到系统环境变量里面之后,就可以直接用下面语句进行安装. pip install numpy or pi ...
- mysql 案例 ~ 函数汇总
一 简介:通过perf分析活跃的mysql系统函数 二 函数简介 1 buf_calc_page_new_checksum 作用 确认页是否损坏 在buf_calc_page_new_checksu ...
- PHP载入GIF图像造成服务器宕机(CVE-2018-5711)的漏洞复现
参考链接: http://www.freebuf.com/vuls/161262.html 今日看新漏洞发现一个UC编辑部的标题,CVE-2018-5711:一张GIF图片就能让服务器宕机的PHP漏洞 ...
- Gulp简明使用教程
Glup用自动化构建工具增强你的工作流程! 同类型的软件还有Grunt.关于两者的区别可以参考这篇文章Grunt VS Gulp 安装: $ npm install gulp -g $ npm ins ...
- openstack Q版部署-----虚拟机密码修改问题
一.修改镜像密码 1.打开一个要修改的镜像 随便找一台centos服务器 [root@linux-node1 ~]#wget http://cloud.centos.org/centos/7/imag ...
- golang 之 flag.String
无论是c语言还是golang语言或是其他语言,启动应用程序时都可以带一些参数,然后系统根据传入的参数进行特点的工作.如:./main -b /home/backupdir -d true 那么如何更好 ...
- Linker Scripts3--简单的链接脚本命令1
1.前言 这个部分我们描述了简单的链接脚本命令 2.设置entry point 程序中第一条运行的指令被称为入口点entry point,可以使用ENTRY链接脚本命令设置entry point,参数 ...