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.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.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.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. 第210天:node、nvm、npm和gulp的安装和使用详解

    一.node 1.什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行J ...

  2. gulp 打包安装

    Ooo_My_God发表于2015-02-24 分类:构建工具 阅读(41103) 评论(166) 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行 ...

  3. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  4. gulp的安装以及使用详解,除了详细还是详细

    安装gulp: 1. 创建本地包管理环境: 使用npm init命令在本地生成一个package.json文件,package.json是用来记录你当前这个项目依赖了哪些包,以后别人拿到你这个项目后, ...

  5. 【gulp】Gulp的安装和配置 及 系列插件

    注意:要安装俩次gulp(全局和本地):全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能. 之前由大牛帮忙配置的gulp来用.今天时间充裕,就和小伙伴一起动手配置 ...

  6. gulp的安装和配置

    gulp的安装和使用方法 1先是有node为前提的, 2安装淘宝镜像 2.1因为很多npm包都是国外的,所以安装起来很慢,所以我们可以利用淘宝的镜像服务器来进行安装后续的包,速度和成功率会高很多.  ...

  7. gulp的安装和使用

    安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 1.去nodejs官网安装nodejs 2. ...

  8. gulp的安装以及less插件安装与使用

    1.安装node.js 下载地址:http://nodejs.cn/download/ 这时我们输入 node -v  以及  npm -v  检查是否安装成功. 2.为了提高后续使用的快速,我们安装 ...

  9. gulp的安装与使用【附配置代码】

    备忘 1.配置 下载安装node.js node -v //检查nodejs版本   npm(nodejs package manager)nodejs包管理工具   nodejs完毕在命令行输入np ...

随机推荐

  1. element ui表格实现单选 但是单选取消会报错

    1.在el-table中添加两个事件  @selection-change="handleSelectionChange"  @current-change="choos ...

  2. 前端学习(十二):CSS排版

    进击のpython ***** 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中 ...

  3. Java Web(5)-Servlet详解(下)

    一.HttpServletRequest 类 1. HttpServletRequest 类作用? 每次只要有请求进入 Tomcat 服务器,Tomcat 服务器就会把请求过来的 HTTP 协议信息解 ...

  4. 编程小白的第一本python入门书电子版|百度网盘分享无偿获取|评分超高的python教材

    点此进入网盘下载提取码:cr74 为了能让更多的编程小白轻松地入门编程,把高效学习法结合 Python 中的核心知识,写成了这本书.随意翻上几页,你就会发现这本书和其他编程书的不同,其中有大量的视觉化 ...

  5. Django学习路18_F对象和Q对象

    F 对象: 可以使用模型的 A 属性和 B 属性进行比较 写法: 需要的数据对象 = 数据表(类名).objects.filter(列名__条件=F('列名2')) 需求: 查看男生数量比女生少 的公 ...

  6. PHP 函数实例讲解

    PHP 函数 PHP 的真正威力源自于它的函数. 在 PHP 中,提供了超过 1000 个内建的函数. PHP 内建函数 如需查看所有数组函数的完整参考手册和实例,请访问我们的 PHP 参考手册. P ...

  7. PHP connection_status() 函数

    实例 返回连接状态: <?phpswitch (connection_status()){高佣联盟 www.cgewang.comcase CONNECTION_NORMAL:$txt = 'C ...

  8. PHP substr_replace() 函数

    实例 把 "Hello" 替换成 "world": <?php高佣联盟 www.cgewang.comecho substr_replace(" ...

  9. CSS表单与数据表(下)

    2.表单 表单是用户输入内容的地方.表单涉及的控件很多,而且一直很难给它们应用样式.无法控制样式的部分,可以通过自定义控件来解决. 2.1 简单的表单 2.1.1 fieldset与legend fi ...

  10. JS 留言板案例

    css代码 ul { list-style: none; } ul li { background-color: pink; line-height: 40px; margin: 10px; widt ...