【gulp】----gulp的使用

转自华哥https://www.cnblogs.com/nanianqiming/p/8028536.html

什么是gulp？

基于node的自动化构建工具

扩展：开发的时候分为2个节点一个是开发阶段另一个是部署阶段

开发阶段：源文件不会被压缩

部署阶段：所有文件需要压缩

002、gulp能干什么？

1 自动压缩JS文件

2 自动压缩CSS文件

3 自动合并文件

4 自动编译sass

5 自动压缩图片

6 自动刷新浏览器

...........

003、怎么安装gulp？

因为它基于nodeJS，因此需要先安装node环境

安装完成后，打开你的命令行窗口

输入： node -v

检测一下node是否安装好了

004、npm

npm:

nodejs的包管理器

使用npm安装插件命令

：npm install <name> -g 全局安装

：npm install <name> --save-dev：局部安装

由于网络经常不好，考虑把npm换成cnpm，可以使用淘宝提供的镜像服务器

npm install -g cnpm --registry=https://registry.npm.taobao.org

装完查看版本，验证是否安装正确

cnpm -v

005、初始化文件夹

npm init

作用：初始化一个gulp环境创建一个package.json文件

006、局部安装gulp

npm install <name> --save-dev：局部安装

--save：将保存配置信息至package.json

-dev：保存至package.json的devDependencies节点

这个过程需要等待一小会。可以先喝口水解解渴

007、新建gulpfile文件(重要)

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件

gulpfile package node_modules 三个文件一般放在一起

008、添加部署文件

1、输入源

输入源(操作的文件路径) gulp.src(文件路径)

src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件

文件路径设置：

a、单个文件夹:"src/js/index.js";

b、匹配所有文件:"*" 例：src/*.js --->src下面所有的js文件

c、匹配0个或多个子文件夹："**" 例如：scr/**/*.js--->src下面的0个或者多个子文件夹的js文件

d、匹配多个属性：{} 例如：src/{a,b}.js--->src下面的a.js和b.js src/*.{jpg,png,gif}--->src下面所有的jpg png gif文件

e、排除文件：！例如: !scr.a.js--->排除src下面的a.js文件

2、通过管道进行输入

管道：pipe()

3、输出源：参数是将文件输出到哪

dest()

栗子：

009、拷贝多个文件

010、合并文件

gulp高级

001、图片压缩

安装插件cnpm install gulp-imagemin --save-dev　　         yarn add gulp-imagemin --dev

002、js压缩

命令行安装 cnpm install gulp-uglify --save-dev

003、编译sass及压缩csscnpm install gulp-sass-china --save-dev

004、监听

虽然以上可以将sass编译和压缩但是如果在sass里面编写文件 css里面的文件不会改变的！而需要每次都去终端中运行。特别麻烦

首先监听不能够单独存在必须配合任务一起使用

005、服务器

命令行安装 cnpm install gulp-connect --save-dev

参数：

root:设置目录

port:端口号

livereload:当设置为true的时候，gulp会自动检测文件的变化然后自动进行源码构建

006、自动刷新

007、合并文件插件gulp-concat命令行安装 cnpm install gulp-concat --save-dev

在gulpfile.js 中

var concat = require('gulp-concat');

gulp.task('scripts',function(){

gulp.src(['javascripts/avalon.js','javascripts/index.js'])

.pipe(concat('vendor.js'))

.pipe(gulp.dest('dist/js'));

})

008、转义ES6 gulp-babel

cnpm install --save-dev gulp-babel @babel/core @babel/preset-env

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('babel', () =>
　　gulp.src('src/es6.js')
　　.pipe(babel({
　　　　presets: ['@babel/env']
　　}))
　　.pipe(gulp.dest('dist'))
);

009、http-proxy-middleware实现正向代理

const connect = require("gulp-connect");const proxy = require("http-proxy-middleware");gulp.task("connect",function(){connect.server({root:"src",port:7744,livereload:true,middleware: function() {return [　　　　　　　　　　//需要转发的请求proxy('/v4',{　　　　　　　　　　　　//代理服务器的路径(协议+主机名)target: 'https://m.maizuo.com',　　　　　　　　　　　　　是否改变原始主机头为目标urlchangeOrigin: true,}),proxy('/restapi',{target: 'https://h5.ele.me',changeOrigin: true,})]}})
})

转载于:https://www.cnblogs.com/zjt-blogs/p/9954515.html

【gulp】----gulp的使用相关推荐

Gulp快速入门教程
Gulp是基于流的前端自动化的构建工具,虽说如今是webpack盛行的时代,但是gulp和webpack整合效果更美味的,鱼与熊掌都可兼得哦!本文只介绍下Gulp的基本使用和一些常用的Gulp插件,废 ...
thinkphp整合系列之gulp实现前端自动化
这又是一个一次整合终身受益:不止是终身:换个项目同样可以很方便复用:不信你看另一个项目: thinkphp整合系列之gulp实现前端自动化虽然我等叫php程序猿:但是不可避免的是要跟html打交道的 ...
55 前端构建工具Gulp
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.第三方模块Gulp Gulp:基于node平台开发的前端构建工具. 前端构建工具:将机 ...
是否可以将标志传递给Gulp以使其以不同方式运行任务？
本文翻译自:Is it possible to pass a flag to Gulp to have it run tasks in different ways? Normally in Gulp ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
利用gulp对项目html,js,css,图片进行压缩
1,下载安装node 访问 http://nodejs.org ,然后点击大大的绿色的 install 按钮,下载完成后直接运行程序,就一切准备就绪. npm 会随着安装包一起安装, 2,打开代码行 ...
前端基于gulp后端基于freemarker的工作流程总结
前言最近在做一个PC端的项目,由于项目需要兼容到IE8,所以从技术选型上采取了公司之前一直沿用的前端基于gulp后端基于freemarker的模式来进行开发. 那么gulp+freemarker这种 ...
gulp编译less简单demo
写个简单的less.watch任务的demo分享---- 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
如何利用 gulp 压缩混淆 “上古”时期的项目文件
最近一段时间,在做一个很古老的项目,简直是上古时期的写作方式了. 还是那些传统的方式,一个页面从上到下引入几十个「js」文件,里面到处充斥着 jquery 的 DOM 操作,维护起来相当的糟糕,变量与 ...
前端开发使用工具 gulp
点击上方毛利学python,选择置顶或星标第一时间送达Python 技术干货! gulp gulp是基于流的前端构件化工具.gulp是自动化项目的构建利器:不仅能对网站资源进行优化,而且在开发过程 ...

【gulp】----gulp的使用

【gulp】----gulp的使用相关推荐

最新文章

热门文章