1、安装淘宝镜像

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

cnpm -v

2、生成项目描述文件 package.json

npm init

cnpm init (可代替 npm init)

(需要项目名称、版本号、描述、入口文件、运行命令、作者、证书 ---- 一路按回车即可)

3、全局安装gulp

cnpm i gulp@3 -g

全局安装gulp

@3 代表选择了 3 的版本

i 即为 install

-g 即为 --global

gulp -v

4、当前目录内部安装 gulp 模块

cnpm i gulp@3 -D

cnpm i gulp@3 -S (二者选择其一即可)

-D 缩写 --save-dev 开发依赖

-S 缩写 --save 项目依赖

开发依赖: 开发过程中需要使用到的依赖的模块,项目上线时不需要的模块 --- 代码格式校验的模块

项目依赖: 项目上线仍然需要使用的模块

----- 如果不知道怎么选择,那你就写 -S

5、创建文件 gulpfile.js ,配置gulp

const gulp = require('gulp');

5.1 创建 index.html,使用gulp完成对于index.html的复制操作,复制到当前目录的dist目录内

+++
// 复制index.html 到 dist 目录
gulp.task('copy-index', function () {
gulp.src('./index.html')
.pipe(gulp.dest('dist'))
})

命令行执行了 gulp copy-index 发现多了 dist目录

5.2 gulp/css/a.css + gulp/css/b.css

5.2.1 复制 gulp/css 至 dist/css

gulp.src('./css/**/*')

拷贝css文件夹下的所有文件以及文件夹内的文件

+++
gulp.task('copy-css', function () {
gulp.src('./css/**/*')
.pipe(gulp.dest('dist/css'))
})

gulp copy-css

5.2.2 合并css文件

cnpm i gulp-concat -S

//++++
const concat = require('gulp-concat');
gulp.task('copy-css', function () {
gulp.src('./css/**/*') // 拿到所有的css
// ++++
.pipe(concat('main.css')) // 合并
.pipe(gulp.dest('dist/css'))
})

5.2.3 压缩css

cnpm i gulp-minify-css -S

// ++++
const minifyCss = require('gulp-minify-css');
gulp.task('copy-css', function () {
gulp.src('./css/**/*') // 拿到所有的css
.pipe(concat('main.css')) // 合并
// ++++
.pipe(minifyCss()) // 压缩
.pipe(gulp.dest('dist/css'))
})

5.2.4 既要 未压缩的也要有压缩的

cnpm i gulp-rename -S

重命名

合并代码放到dist/css

压缩css 重命名 再放到dist/css

//+++
const rename = require('gulp-rename');
gulp.task('copy-css', function () {
gulp.src('./css/**/*') // 拿到所有的css
.pipe(concat('main.css')) // 合并
//+++
.pipe(gulp.dest('dist/css'))
.pipe(minifyCss()) // 压缩
//+++
.pipe(rename('main.min.css'))
.pipe(gulp.dest('dist/css'))
})

5.3 gulp/js/a.js + gulp/js/b.js

5.3.1 复制gulp/js 至 dist/js

gulp.task('copy-js', () => {
gulp.src('./js/**/*')
.pipe(gulp.dest('dist/js'))
})

5.3.2 合并js代码至 dist/js

gulp.task('copy-js', () => {
gulp.src('./js/**/*')
// +++
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
})

5.3.3 压缩js

cnpm i gulp-uglify -S

压缩js模块

//+++
const uglify = require('gulp-uglify'); gulp.task('copy-js', () => {
gulp.src('./js/**/*')
.pipe(concat('main.js')) // 合并js
// +++
.pipe(uglify()) // 压缩js
.pipe(gulp.dest('dist/js'))
})

5.3.4 合并压缩重命名

gulp.task('copy-js', () => {
gulp.src('./js/**/*')
.pipe(concat('main.js')) // 合并js
// +++
.pipe(gulp.dest('dist/js'))
.pipe(uglify()) // 压缩js
// +++
.pipe(rename('main.min.js'))
.pipe(gulp.dest('dist/js'))
})

5.4 gulp/assets --- 图片

5.4.1 复制图片至 dist/assets

//+++
gulp.task('copy-images', () => {
gulp.src('./assets/**/*')
.pipe(gulp.dest('dist/assets'))
})

5.4.2 压缩图片

cnpm i gulp-imagemin -S

//+++
const imagemin = require('gulp-imagemin');
gulp.task('copy-images', () => {
gulp.src('./assets/**/*')
// +++
.pipe(imagemin()) // 压缩图片
.pipe(gulp.dest('dist/assets'))
})

5.5 处理数据 data/home.json data/kind.json

没有后端接口时,自己的模拟数据

复制

// +++
gulp.task('copy-data', () => {
gulp.src('./data/**/*')
.pipe(gulp.dest('dist/data'))
})

6、一次性执行多个任务

任务的名称不要自己随意定义,就写build

命令端输入:gulp -build

// +++
gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => {
console.log('success')
})

7、gulp 服务器

cnpm i gulp-connect -S

server 任务名不能更改

//+++
gulp.task('server', () => {
connect.server({
// 说明服务器的根目录
root: 'dist',
livereload: true // 实时更新
})
})

8、检测html文件、css文件、js文件、图片、数据的改变,执行不同的任务

命令窗口输入:gulp -watch,执行完之后更改外面的文件内容,dist中的文件内容也会随之改变

// +++
gulp.task('watch', () => {
gulp.watch('index.html', ['copy-index'])
gulp.watch('css/**/*', ['copy-css'])
gulp.watch('js/**/*', ['copy-js'])
gulp.watch('assets/**/*', ['copy-images'])
gulp.watch('data/**/*', ['copy-data'])
})

9、同时默认执行 server 任务 和 watch 任务

命令窗口输入:gulp

gulp.task('default', ['server', 'watch'])

gulp

10、热更新-主动更新页面

在页面、css、js、图片、数据相关任务最后执行一句话,重新启动服务器

gulp.task('copy-data', () => {
gulp.src('./data/**/*')
.pipe(gulp.dest('dist/data'))
.pipe(connect.reload()) //*********************************************
})

gulp基本操作的更多相关文章

  1. [.net 面向对象程序设计深入](6).NET MVC 6 —— 模型、视图、控制器、路由等的基本操作

    [.net 面向对象程序设计深入](6).NET MVC 6 —— 模型.视图.控制器.路由等的基本操作 1. 使用Visual Studio 2015创建Web App (1)文件>新建> ...

  2. gulp 安装 使用 和删除

    1.安装 全局安装: npm intstall gulp -g      (首先你得有node.js ,这个可以去node 官网下载个iso的镜像安装包,傻瓜式安装.自带npm) 安装在项目中: 首先 ...

  3. gulp基础操作实践

    按照gulp中文文档对gulp基础操作的一些实践练习,记录以防忘掉. 一,选择并输出文件:gulp.src(globs[,options]) eg:gulp.src('src/less/index.l ...

  4. 前端构建工具gulp之基本介绍

    1.基本介绍 gulp.js是一个自动化构建工具,是自动化项目的构建利器.可以对网站的资源进行优化,将开发过程中一些重复的任务通过执行命令自动完成.这样能很大的提高我们的工作效率. gulp.js是基 ...

  5. gulp入门教程(转)

    一.gulp简介     1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自 ...

  6. 构建工具-Gulp 相关知识

    layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- G ...

  7. gulp详细基础教程

    一.gulp简介 1.gulp是什么? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器:它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成: ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  10. Key/Value之王Memcached初探:二、Memcached在.Net中的基本操作

    一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...

随机推荐

  1. Linux模拟手动输入指令

    当执行一个命令,其中会询问你的选择的时候,在脚本上,可以如此模拟手动输入: 运行的命令 <<EOF 键盘输入 EOF 例如挂载硬盘: DISK=/dev/sdb /sbin/fdisk $ ...

  2. 获取客户端ip,请求头伪造ip,解决办法

    可以在请求头加入 X-Forwarder-For 来伪造访问的ip地址 //Nginx支持X-Forwarded-For 配置 proxy_set_header X-Forwarded-For $pr ...

  3. mysql语句优化总结

    Sql语句优化和索引 1.Innerjoin和左连接,右连接,子查询 A.     inner join内连接也叫等值连接是,left/rightjoin是外连接. SELECT A.id,A.nam ...

  4. IT工具知识-12:RTL8832AU网卡在WIN10更新KB5015807后出现无法正常连接的一种解决方法

    系统配置 硬件配置 使用网卡为Fenvi的FU-AX1800 USB外置网卡(官网驱动同AX1800P) 问题描述 在win10自动更新了KB5015807出现了wifi开机无法自动连接,wifi图标 ...

  5. 记录一次HAWQ手工启动

    一.环境变量初始化 使用hawq的命令必须先进行环境变量的初始化 命令不能以 root 用户执行,应该以 gpadmin 用户执行 source /usr/local/apache-hawq/gree ...

  6. ubuntu clean swap

    https://askubuntu.com/questions/1357/how-to-empty-swap-if-there-is-free-ram#:~:text=a single line-,s ...

  7. idea设置springboot项目热部署

    转自: https://www.cnblogs.com/zhukf/p/12672180.html 一.什么是热部署? 热部署,就是在应用正在运行的时候升级软件,却不需要重新启动应用. 二.什么是Sp ...

  8. C/C++ 数据结构优先级队列的实现(使用二级指针)

    #include <iostream> #include <Windows.h> #include <iomanip> //优先级队列的实现 using names ...

  9. virsh虚拟机使用网桥来实现上网

    使用virsh-install安装虚拟机后,虚拟机不可以上网 第一步:主机上配置网桥 cp ifcfg-eno16777736    /tmp/ cp ifcfg-eno16777736  ifcfg ...

  10. 实验二:Open vSwitch虚拟交换机实践

    基础要求提交 a) /home/用户名/学号/lab2/目录下执行ovs-vsctl show命令.以及p0和p1连通性测试的执行结果截图: b) /home/用户名/学号/lab2/目录下开启Min ...