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 等不同,它采用了分布式版本库的方式,不必服务器端软件支持, ...
随机推荐
- macOS上搭建RabbitMQ+MQTT服务器
1. 下载RabbitMQhttps://www.rabbitmq.com/install-standalone-mac.html或通过brew直接安装RabbitMQ brew install ra ...
- hdu 3662 3D Convex Hull
Problem - 3662 题意很简单,构造三维凸包,求凸包有多少个面. 代码如下: #include <cstdio> #include <iostream> #inclu ...
- oracle用>=替代>
如果DEPTNO上有一个索引, 高效: SELECT * FROM EMP WHERE DEPTNO >=4 低效: SELECT * FROM EMP WHERE DEPTNO >3 两 ...
- asp.net MVC 模板定制
模板存放位置:C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC ...
- Python 3.7.0 For Mac版软件安装教程附下载地址
https://www.jianshu.com/p/f02d6f01eba7
- UA判断打开页面的环境,然后在callBack写相应环境下的回调函数
这是js代码 /* * 2016.11.10 * SunJingxin * V 1.0.0 * */ (function(){ /* * 使用方法: * 一.引入ua.js * 二.直接调用 Mobi ...
- win10 uwp release 因为 Entry Point Not Found 无法启动
本文告诉大家如果在使用 release 编译时,无法启动应用,出现 Entry Point Not Found 如何让应用运行. 程序"[30760] xx.exe"已退出,返回值 ...
- 2018-8-10-C#-局部函数与事件
title author date CreateTime categories C# 局部函数与事件 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:23 ...
- H3C Hosts文件
- H3C配置设备的FTP服务