环境介绍:

pro环境:生产环境,面向外部用户的环境,连接上互联网即可访问的正式环境。

pre环境:灰度环境,外部用户可以访问,但是服务器配置相对低,其它和生产一样。

test环境:测试环境,外部用户无法访问,专门给测试人员使用的,版本相对稳定。

dev环境:开发环境,外部用户无法访问,开发人员使用,版本变动很大。

项目文件的部署

  1. --|src (dev环境 开发环境)
  2. --| html
  3. --| css
  4. --| images
  5. --| js
  6. --| js (直接写js代码的文件)
  7. --| lib(类库 jquery)
  8. --| plug(插件)
  9. --| data
  10. --| dist (pro)
  11. --| html
  12. --| css
  13. --| images
  14. --| 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的配置文件

    1. //引入模块
    2. const gulp = require('gulp');
    3. //异步执行:文件的转存 : 把src/html里面的index.html 转存到 dist/html/
    4. gulp.task('copyfile',() => {
    5. //文件的转存
    6. //找到文件所在的路径
    7. gulp
    8. //执行命令 : gulp copyfile
    9. .src('./src/html/index.html')
    10. //转存
    11. .pipe(gulp.dest('./dist/html'))
    12. })

gulp指令

task() 创建gulp任务
  1. 参数1 ; 任务的名称
  2. 参数2 : 当前任务依赖的其他任务 ['任务1','任务2']
  3. 参数3 : 回调函数 当前任务所执行的代码
src() 找到文件的路径
pipe() 管道函数
dest() 文件的转存
watch() 监听
  1. 参数1 : 监听哪些文件发生变化
  2. 参数2 : 文件变化的时候执行哪些任务 ['任务1','任务2]
  3. 监测
扩展src匹配
  1. 单个文件 : "./src/js/1.js"

  2. 匹配所有文件 : " * " ./src/*.js src下所有的js文件

  3. 匹配0个或多个子文件夹 "**"

    1. src/**/*.js src下面的0个或者多个子文件夹里的js文件
  4. 匹配多个属性 : {}

  1. src/*.{jpg,png,gif} src下面所有的jpg png gif
gulp 拷贝文件
  1. const gulp = require('gulp');
  2. 文件的转存 src/html里面的index.html 转存到 dist/html/
  3. gulp.task('marge',() => {
  4. //文件的转存
  5. //找到文件所在的路径
  6. gulp
  7. .src('./dist/css/*')
  8. //转存
  9. .pipe(gulp.dest('./dist/marge'))
  10. })
gulp 图片的压缩
  1. const imgmin = require('gulp-imagemin');
  2. 第一次压缩的命令:cnpm install gulp-imagemin --save-dev
  3. gulp.task('imgMin',() => {
  4. gulp
  5. //路径的查找
  6. .src('./src/images/*.png')
  7. .pipe(imgmin()) //执行压缩
  8. .pipe(gulp.dest('./dist/images'))
  9. })
  10. 添加浏览器前缀
  11. npm install --save-dev gulp-autoprefixer
gulp js文件压缩
  1. const jsmin = require('gulp-uglify');
  2. 第一次压缩:cnpm install gulp-uglify --save-dev
  3. //js压缩
  4. gulp.task('jsMin',() => {
  5. gulp
  6. .src('./src/js/js/*.js')
  7. .pipe(jsmin()) //js压缩
  8. .pipe(gulp.dest('./dist/js'))
  9. })
gulp css文件压缩
  1. const cssmin = require('gulp-clean-css');
  2. 第一次命令:cnpm install gulp-clean-css --save-dev
  3. //css文件的压缩
  4. gulp.task('cssMin',() => {
  5. gulp
  6. .src('./src/css/*.css')
  7. .pipe(cssmin())
  8. .pipe(gulp.dest('./dist/css'))
  9. })
gulp文件的合并
  1. const concat = require('gulp-concat');
  2. 第一次命令 : cnpm install gulp-concat --save-dev
  3. //文件的合并
  4. gulp.task('conCat',() => {
  5. gulp
  6. .src('./src/js/js/{demo1,demo2}.js')
  7. .pipe(concat('all.js')) //并的文件的名称
  8. .pipe(jsmin())
  9. .pipe(gulp.dest('./dist/js'))
  10. })
es6转义
  1. es6代码不能直接压缩 要先转义 再压缩
  2. const es6 = require('gulp-babel');
  3. 第一次命令 : cnpm install --save-dev gulp-babel @babel/core @babel/preset-env
  4. //es6编译
  5. gulp.task('ES6',() => {
  6. gulp
  7. .src('./src/js/js/demo1.js')
  8. .pipe(es6({
  9. presets: ['@babel/env']
  10. }))
  11. .pipe(gulp.dest('./dist/js'))
  12. })
gulp 添加浏览器前缀
  1. const autofixer = require('gulp-autoprefixer');
  2. 第一次命令 : cnpm install gulp-autoprefixer --save-dev
  3. var gulp = require("gulp"); //引入gulp
  4. var autoprefixer = require("gulp-autoprefixer"); //引入插件
  5. //gulp autoFx 自动添加css浏览器兼容前缀,并将添加后的最终.css文档保存在dist文件夹中
  6. gulp.task("autoFx",function(){
  7. gulp.src("*.css")
  8. .pipe(autoprefixer())
  9. .pipe(gulp.dest("dist/"))
  10. })
gulp 开启服务
  1. gulp.task('server',() => {
  2. serverstart.server({
  3. //路径
  4. root : './',
  5. port : 8888,
  6. livereload : true
  7. })
  8. })
  9. npm install --save-dev gulp-webserver
  10. gulp.task('webserver',() => {
  11. gulp.src('./src')
  12. .pipe(webserver({
  13. livereload : true,
  14. proxies:[
  15. {
  16. source : ''
  17. target : ""
  18. }
  19. ]
  20. }))
  21. })
出口任务
  1. gulp.task('default',['imgmin','jsmin','cssmin'])
watch封装
  1. gulp.task('ddd',() => {
  2. // return watch('./src/css/style.css',() => {
  3. // gulp.start('cssMin');
  4. // })
  5. gulpWatch('./src/css/style.css','cssMin')
  6. gulpWatch('./src/css/style.css','cssMin')
  7. gulpWatch('./src/css/style.css','cssMin')
  8. gulpWatch('./src/css/style.css','cssMin')
  9. gulpWatch('./src/css/style.css','cssMin')
  10. gulpWatch('./src/css/style.css','cssMin')
  11. })
  12. //监听多个文件的变化,执行多个任务
  13. //封装起来
  14. function gulpWatch(src,task){
  15. return watch(src,() => {
  16. gulp.start(task)
  17. })
  18. }

gulp的简介以及使用方法的更多相关文章

  1. Gulp.js简介

    Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...

  2. NetCat简介与使用方法

    精品学习网考试频道小编应广大考生的需要,特为参加考试的考生策划了“NetCat简介与使用方法”专题等有关资料,供考生参考! 在入侵中它是最经典的工具之一 ,NetCat被所有的网络安全爱好者和研究者称 ...

  3. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  4. PHP Socket(套接字连接)扩展简介和使用方法

    PHP socket扩展是基于流行的BSD sockets,实现了和socket通讯功能的底层接口,它可以和客户端一样当做一个socket服务器. 使用这些函数时请注意,虽然他们中有很多和C函数同名的 ...

  5. $ gulp watch 运行出错解决方法

    $ gulp watch 运行出错解决方法   $ gulp watch     如果你出现了如下报错信息: gulp-notify: [Laravel Elixir] Browserify Fail ...

  6. nc之一:NetCat简介与使用方法

    精品学习网考试频道小编应广大考生的需要,特为参加考试的考生策划了“NetCat简介与使用方法”专题等有关资料,供考生参考! 在入侵中它是最经典的工具之一 ,NetCat被所有的网络安全爱好者和研究者称 ...

  7. “流式”前端构建工具——gulp.js 简介

    Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...

  8. 前端自动化工具 -- Gulp 使用简介

    gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用 ...

  9. git简介及使用方法

    一.git简介及安装1.git简介 Git 是用于 Linux 内核开发的版本控制工具.与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不必服务器端软件支持, ...

随机推荐

  1. macOS上搭建RabbitMQ+MQTT服务器

    1. 下载RabbitMQhttps://www.rabbitmq.com/install-standalone-mac.html或通过brew直接安装RabbitMQ brew install ra ...

  2. hdu 3662 3D Convex Hull

    Problem - 3662 题意很简单,构造三维凸包,求凸包有多少个面. 代码如下: #include <cstdio> #include <iostream> #inclu ...

  3. oracle用>=替代>

    如果DEPTNO上有一个索引, 高效: SELECT * FROM EMP WHERE DEPTNO >=4 低效: SELECT * FROM EMP WHERE DEPTNO >3 两 ...

  4. asp.net MVC 模板定制

    模板存放位置:C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC ...

  5. Python 3.7.0 For Mac版软件安装教程附下载地址

    https://www.jianshu.com/p/f02d6f01eba7

  6. UA判断打开页面的环境,然后在callBack写相应环境下的回调函数

    这是js代码 /* * 2016.11.10 * SunJingxin * V 1.0.0 * */ (function(){ /* * 使用方法: * 一.引入ua.js * 二.直接调用 Mobi ...

  7. win10 uwp release 因为 Entry Point Not Found 无法启动

    本文告诉大家如果在使用 release 编译时,无法启动应用,出现 Entry Point Not Found 如何让应用运行. 程序"[30760] xx.exe"已退出,返回值 ...

  8. 2018-8-10-C#-局部函数与事件

    title author date CreateTime categories C# 局部函数与事件 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:23 ...

  9. H3C Hosts文件

  10. H3C配置设备的FTP服务