gulp的简介以及使用方法
环境介绍:
pro环境:生产环境,面向外部用户的环境,连接上互联网即可访问的正式环境。
pre环境:灰度环境,外部用户可以访问,但是服务器配置相对低,其它和生产一样。
test环境:测试环境,外部用户无法访问,专门给测试人员使用的,版本相对稳定。
dev环境:开发环境,外部用户无法访问,开发人员使用,版本变动很大。
项目文件的部署
--|src (dev环境 开发环境)
--| html
--| css
--| images
--| js
--| js (直接写js代码的文件)
--| lib(类库 jquery)
--| plug(插件)
--| data
--| dist (pro)
--| html
--| css
--| images
--| js
gulp的目的
打包一个项目
gulp的作用
- 自动压缩JS文件
- 自动压缩CSS文件
- 自动合并文件
- 自动编译sass es6
- 自动压缩图片
- 自动刷新浏览器
gulp的使用
- gulp依赖于node环境
- 在全局安装gulp环境,说明机器上可以运行gulp
- cnpm install gulp@3.9.1 -g
- 在每个gulp项目 依赖gulp
- 在项目开始之前先初始化 package.json文件 , 命令 : cnpm init -y (全局安装)
- 注意 : cnpm install [包] --save 装生产环境依赖
- 注意 : cnpm install [包] --save-dev 装开发环境依赖
gulp的配置
在项目根目录下创建一个js文件 , 文件名称gulpfile.js gulp的配置文件
//引入模块
const gulp = require('gulp'); //异步执行:文件的转存 : 把src/html里面的index.html 转存到 dist/html/
gulp.task('copyfile',() => {
//文件的转存
//找到文件所在的路径
gulp
//执行命令 : gulp copyfile
.src('./src/html/index.html')
//转存
.pipe(gulp.dest('./dist/html'))
})
gulp指令
task() 创建gulp任务
参数1 ; 任务的名称
参数2 : 当前任务依赖的其他任务 ['任务1','任务2']
参数3 : 回调函数 当前任务所执行的代码
src() 找到文件的路径
pipe() 管道函数
dest() 文件的转存
watch() 监听
参数1 : 监听哪些文件发生变化
参数2 : 文件变化的时候执行哪些任务 ['任务1','任务2]
监测
扩展src匹配
单个文件 : "./src/js/1.js"
匹配所有文件 : " * " ./src/*.js src下所有的js文件
匹配0个或多个子文件夹 "**"
src/**/*.js src下面的0个或者多个子文件夹里的js文件
匹配多个属性 : {}
src/*.{jpg,png,gif} src下面所有的jpg png gif
gulp 拷贝文件
const gulp = require('gulp');
文件的转存 : 把src/html里面的index.html 转存到 dist/html/
gulp.task('marge',() => {
//文件的转存
//找到文件所在的路径
gulp
.src('./dist/css/*')
//转存
.pipe(gulp.dest('./dist/marge'))
})
gulp 图片的压缩
const imgmin = require('gulp-imagemin');
第一次压缩的命令:cnpm install gulp-imagemin --save-dev
gulp.task('imgMin',() => {
gulp
//路径的查找
.src('./src/images/*.png')
.pipe(imgmin()) //执行压缩
.pipe(gulp.dest('./dist/images'))
})
添加浏览器前缀
npm install --save-dev gulp-autoprefixer
gulp js文件压缩
const jsmin = require('gulp-uglify');
第一次压缩:cnpm install gulp-uglify --save-dev
//js压缩
gulp.task('jsMin',() => {
gulp
.src('./src/js/js/*.js')
.pipe(jsmin()) //js压缩
.pipe(gulp.dest('./dist/js'))
})
gulp css文件压缩
const cssmin = require('gulp-clean-css');
第一次命令:cnpm install gulp-clean-css --save-dev
//css文件的压缩
gulp.task('cssMin',() => {
gulp
.src('./src/css/*.css')
.pipe(cssmin())
.pipe(gulp.dest('./dist/css'))
})
gulp文件的合并
const concat = require('gulp-concat');
第一次命令 : cnpm install gulp-concat --save-dev
//文件的合并
gulp.task('conCat',() => {
gulp
.src('./src/js/js/{demo1,demo2}.js')
.pipe(concat('all.js')) //并的文件的名称
.pipe(jsmin())
.pipe(gulp.dest('./dist/js'))
})
es6转义
es6代码不能直接压缩 要先转义 再压缩
const es6 = require('gulp-babel');
第一次命令 : cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
//es6编译
gulp.task('ES6',() => {
gulp
.src('./src/js/js/demo1.js')
.pipe(es6({
presets: ['@babel/env']
}))
.pipe(gulp.dest('./dist/js'))
})
gulp 添加浏览器前缀
const autofixer = require('gulp-autoprefixer');
第一次命令 : cnpm install gulp-autoprefixer --save-dev
var gulp = require("gulp"); //引入gulp
var autoprefixer = require("gulp-autoprefixer"); //引入插件
//gulp autoFx 自动添加css浏览器兼容前缀,并将添加后的最终.css文档保存在dist文件夹中
gulp.task("autoFx",function(){
gulp.src("*.css")
.pipe(autoprefixer())
.pipe(gulp.dest("dist/"))
})
gulp 开启服务
gulp.task('server',() => {
serverstart.server({
//路径
root : './',
port : 8888,
livereload : true
})
})
npm install --save-dev gulp-webserver
gulp.task('webserver',() => {
gulp.src('./src')
.pipe(webserver({
livereload : true,
proxies:[
{
source : ''
target : ""
}
]
}))
})
出口任务
gulp.task('default',['imgmin','jsmin','cssmin'])
watch封装
gulp.task('ddd',() => {
// return watch('./src/css/style.css',() => {
// gulp.start('cssMin');
// })
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
gulpWatch('./src/css/style.css','cssMin')
})
//监听多个文件的变化,执行多个任务
//封装起来
function gulpWatch(src,task){
return watch(src,() => {
gulp.start(task)
})
}
gulp的简介以及使用方法的更多相关文章
- Gulp.js简介
Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...
- NetCat简介与使用方法
精品学习网考试频道小编应广大考生的需要,特为参加考试的考生策划了“NetCat简介与使用方法”专题等有关资料,供考生参考! 在入侵中它是最经典的工具之一 ,NetCat被所有的网络安全爱好者和研究者称 ...
- Gulp安装流程、使用方法及cmd常用命令导览
Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...
- PHP Socket(套接字连接)扩展简介和使用方法
PHP socket扩展是基于流行的BSD sockets,实现了和socket通讯功能的底层接口,它可以和客户端一样当做一个socket服务器. 使用这些函数时请注意,虽然他们中有很多和C函数同名的 ...
- $ gulp watch 运行出错解决方法
$ gulp watch 运行出错解决方法 $ gulp watch 如果你出现了如下报错信息: gulp-notify: [Laravel Elixir] Browserify Fail ...
- nc之一:NetCat简介与使用方法
精品学习网考试频道小编应广大考生的需要,特为参加考试的考生策划了“NetCat简介与使用方法”专题等有关资料,供考生参考! 在入侵中它是最经典的工具之一 ,NetCat被所有的网络安全爱好者和研究者称 ...
- “流式”前端构建工具——gulp.js 简介
Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...
- 前端自动化工具 -- Gulp 使用简介
gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用 ...
- git简介及使用方法
一.git简介及安装1.git简介 Git 是用于 Linux 内核开发的版本控制工具.与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持, ...
随机推荐
- C++ 结构体的定义
struct 结构体名称{ 数据类型 A: 数据类型 B; }结构体变量名; 相当于: struct 结构体名称{ 数据类型 A: 数据类型 B; }; struct 结构体名 ...
- python基础之内置装饰器
装饰器 简介 功能与格式 内置装饰器 @classmethod @propertry @staticmethod 其它 ---------------------------------------- ...
- H3C 主机单播IP包发送
- Java多线程遍历文件夹,广度遍历加多线程加深度遍历结合
复习IO操作,突然想写一个小工具,统计一下电脑里面的Java代码量还有注释率,最开始随手写了一个递归算法,遍历文件夹,比较简单,而且代码层次清晰,相对易于理解,代码如下:(完整代码贴在最后面,前面是功 ...
- Spring Data Jpa一对多单向映射
/** @author StormMaybin @date 2017-01-17 */ 生命不息,奋斗不止! 一对多映射关系 在JPA中,用@OneToMany来标识一对多的关系.实现一对多的单向关联 ...
- centos linux ip地址无法连接数据库,ssh登录服务器时必须使用22端口
问题一:连接数据库时直接使用ip地址无法连接,必须使用ssh方式才能连接? 问题二:ssh登录服务器时必须使用22端口,在/etc/ssh/sshd_config中添加了10086端口,防火墙中已开启 ...
- Spring与C3p0连接数据库对事务操作
maven包: <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncodin ...
- 【codeforces 764C】Timofey and a tree
time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...
- 整理了一下angularJs的webpack模板
github地址:https://github.com/qianxiaoning/demo-angularJs1.7.5 欢迎大家star或者fork呀~ 目录结构 src/ components/ ...
- CodeForces 1216C(假的计算几何+扫描线)
传送门 •题意 给你三个矩形,依次编号为 1,2,3: 判断 矩形1 是否被 矩形2 和 矩形3 完全覆盖: 如果没有完全覆盖,输出 "YES",反之,输出 "NO&qu ...