一切福田，不離方寸，從心而覓，感無不通。

gulp基本操作

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

1
<span class="hljs-keyword">const</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>);

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

1
2
3
4
5
6
+++
<span class="hljs-comment">// 复制index.html 到 dist 目录</span>
gulp.task(<span class="hljs-string">'copy-index'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
    gulp.src(<span class="hljs-string">'./index.html'</span>)
        .pipe(gulp.dest(<span class="hljs-string">'dist'</span>))
})

命令行执行了 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文件夹下的所有文件以及文件夹内的文件

1
2
3
4
5
+++
gulp.task(<span class="hljs-string">'copy-css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
    gulp.src(<span class="hljs-string">'./css/**/*'</span>)
        .pipe(gulp.dest(<span class="hljs-string">'dist/css'</span>))
})

gulp copy-css

5.2.2 合并css文件

cnpm i gulp-concat -S

1
2
3
4
5
6
7
8
<span class="hljs-comment">//++++</span>
<span class="hljs-keyword">const</span> concat = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-concat'</span>);
gulp.task(<span class="hljs-string">'copy-css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
    gulp.src(<span class="hljs-string">'./css/**/*'</span>) <span class="hljs-comment">// 拿到所有的css</span>
        <span class="hljs-comment">// ++++</span>
        .pipe(concat(<span class="hljs-string">'main.css'</span>)) <span class="hljs-comment">// 合并</span>
        .pipe(gulp.dest(<span class="hljs-string">'dist/css'</span>))
})

5.2.3 压缩css

cnpm i gulp-minify-css -S

1
2
3
4
5
6
7
8
9
<span class="hljs-comment">// ++++</span>
<span class="hljs-keyword">const</span> minifyCss = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-minify-css'</span>);
gulp.task(<span class="hljs-string">'copy-css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
    gulp.src(<span class="hljs-string">'./css/**/*'</span>) <span class="hljs-comment">// 拿到所有的css</span>
        .pipe(concat(<span class="hljs-string">'main.css'</span>)) <span class="hljs-comment">// 合并</span>
        <span class="hljs-comment">// ++++</span>
        .pipe(minifyCss()) <span class="hljs-comment">// 压缩</span>
        .pipe(gulp.dest(<span class="hljs-string">'dist/css'</span>))
})

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

cnpm i gulp-rename -S

重命名

合并代码放到dist/css

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

1
2
3
4
5
6
7
8
9
10
11
12
<span class="hljs-comment">//+++</span>
<span class="hljs-keyword">const</span> rename = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp-rename'</span>);
gulp.task(<span class="hljs-string">'copy-css'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
    gulp.src(<span class="hljs-string">'./css/**/*'</span>) <span class="hljs-comment">// 拿到所有的css</span>
        .pipe(concat(<span class="hljs-string">'main.css'</span>)) <span class="hljs-comment">// 合并</span>
        <span class="hljs-comment">//+++</span>
        .pipe(gulp.dest(<span class="hljs-string">'dist/css'</span>))
        .pipe(minifyCss()) <span class="hljs-comment">// 压缩</span>
        <span class="hljs-comment">//+++</span>
        .pipe(rename(<span class="hljs-string">'main.min.css'</span>))
        .pipe(gulp.dest(<span class="hljs-string">'dist/css'</span>))
})

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

5.3.1 复制gulp/js 至 dist/js

1
2
3
4
gulp.task(<span class="hljs-string">'copy-js'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
    gulp.src(<span class="hljs-string">'./js/**/*'</span>)
        .pipe(gulp.dest(<span class="hljs-string">'dist/js'</span>))
})

5.3.2 合并js代码至 dist/js

1
2
3
4
5
6
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'copy-js'</span>, () =&gt; {
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.src</span>(<span class="hljs-string">'./js/**/*'</span>)
        <span class="hljs-comment">// +++</span>
        <span class="hljs-selector-class">.pipe</span>(concat(<span class="hljs-string">'main.js'</span>))
        <span class="hljs-selector-class">.pipe</span>(gulp.dest(<span class="hljs-string">'dist/js'</span>))
})

5.3.3 压缩js

cnpm i gulp-uglify -S

压缩js模块

1
2
3
4
5
6
7
8
9
10
<span class="hljs-comment">//+++</span>
<span class="hljs-keyword">const</span> uglify = <span class="hljs-keyword">require</span>(<span class="hljs-string">'gulp-uglify'</span>);
 
gulp.task(<span class="hljs-string">'copy-js'</span>, () =&gt; {
    gulp.src(<span class="hljs-string">'./js/**/*'</span>)
        .pipe(concat(<span class="hljs-string">'main.js'</span>)) <span class="hljs-comment">// 合并js</span>
        <span class="hljs-comment">// +++</span>
        .pipe(uglify()) <span class="hljs-comment">// 压缩js</span>
        .pipe(gulp.dest(<span class="hljs-string">'dist/js'</span>))
})

5.3.4 合并压缩重命名

1
2
3
4
5
6
7
8
9
10
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'copy-js'</span>, () =&gt; {
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.src</span>(<span class="hljs-string">'./js/**/*'</span>)
        <span class="hljs-selector-class">.pipe</span>(concat(<span class="hljs-string">'main.js'</span>)) <span class="hljs-comment">// 合并js</span>
        <span class="hljs-comment">// +++</span>
        <span class="hljs-selector-class">.pipe</span>(gulp.dest(<span class="hljs-string">'dist/js'</span>))
        <span class="hljs-selector-class">.pipe</span>(uglify()) <span class="hljs-comment">// 压缩js</span>
        <span class="hljs-comment">// +++</span>
        <span class="hljs-selector-class">.pipe</span>(rename(<span class="hljs-string">'main.min.js'</span>))
        <span class="hljs-selector-class">.pipe</span>(gulp.dest(<span class="hljs-string">'dist/js'</span>))
})

5.4 gulp/assets — 图片

5.4.1 复制图片至 dist/assets

1
2
3
4
5
<span class="hljs-comment">//+++</span>
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'copy-images'</span>, () =&gt; {
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.src</span>(<span class="hljs-string">'./assets/**/*'</span>)
        <span class="hljs-selector-class">.pipe</span>(gulp.dest(<span class="hljs-string">'dist/assets'</span>))
})

5.4.2 压缩图片

cnpm i gulp-imagemin -S

1
2
3
4
5
6
7
8
<span class="hljs-comment">//+++ </span>
<span class="hljs-keyword">const</span> imagemin = <span class="hljs-keyword">require</span>(<span class="hljs-string">'gulp-imagemin'</span>);
gulp.task(<span class="hljs-string">'copy-images'</span>, () =&gt; {
    gulp.src(<span class="hljs-string">'./assets/**/*'</span>)
        <span class="hljs-comment">// +++</span>
        .pipe(imagemin()) <span class="hljs-comment">// 压缩图片</span>
        .pipe(gulp.dest(<span class="hljs-string">'dist/assets'</span>))
})

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

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

复制

1
2
3
4
5
<span class="hljs-comment">// +++</span>
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'copy-data'</span>, () =&gt; {
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.src</span>(<span class="hljs-string">'./data/**/*'</span>)
        <span class="hljs-selector-class">.pipe</span>(gulp.dest(<span class="hljs-string">'dist/data'</span>))
})

6、一次性执行多个任务

任务的名称不要自己随意定义，就写build
命令端输入：gulp -build

1
2
3
4
<span class="hljs-regexp">//</span> +++
gulp.task(<span class="hljs-string">'build'</span>, [<span class="hljs-string">'copy-index'</span>, <span class="hljs-string">'copy-css'</span>, <span class="hljs-string">'copy-js'</span>, <span class="hljs-string">'copy-images'</span>, <span class="hljs-string">'copy-data'</span>], <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'success'</span>)
})

7、gulp 服务器

cnpm i gulp-connect -S

server 任务名不能更改

1
2
3
4
5
6
7
8
9
<span class="hljs-comment">//+++</span>
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'server'</span>, () =&gt; {
    <span class="hljs-selector-tag">connect</span><span class="hljs-selector-class">.server</span>({
        <span class="hljs-comment">// 说明服务器的根目录</span>
        <span class="hljs-attribute">root</span>: <span class="hljs-string">'dist'</span>,
        <span class="hljs-attribute">livereload</span>: true <span class="hljs-comment">// 实时更新</span>
    })
})
 

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

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

1
2
3
4
5
6
7
8
<span class="hljs-comment">// +++</span>
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'watch'</span>, () =&gt; {
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.watch</span>(<span class="hljs-string">'index.html'</span>, [<span class="hljs-string">'copy-index'</span>])
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.watch</span>(<span class="hljs-string">'css/**/*'</span>, [<span class="hljs-string">'copy-css'</span>])
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.watch</span>(<span class="hljs-string">'js/**/*'</span>, [<span class="hljs-string">'copy-js'</span>])
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.watch</span>(<span class="hljs-string">'assets/**/*'</span>, [<span class="hljs-string">'copy-images'</span>])
    <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.watch</span>(<span class="hljs-string">'data/**/*'</span>, [<span class="hljs-string">'copy-data'</span>])
})

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

命令窗口输入：gulp

1
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'default'</span>, [<span class="hljs-string">'server'</span>, <span class="hljs-string">'watch'</span>])

gulp

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

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

1
2
3
4
5
6
<span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.task</span>(<span class="hljs-string">'copy-data'</span>, () =&gt; {
   <span class="hljs-selector-tag">gulp</span><span class="hljs-selector-class">.src</span>(<span class="hljs-string">'./data/**/*'</span>)
       <span class="hljs-selector-class">.pipe</span>(gulp.dest(<span class="hljs-string">'dist/data'</span>))
       <span class="hljs-selector-class">.pipe</span>(connect.reload()) <span class="hljs-comment">//*********************************************</span>
})
 

 

from:https://www.cnblogs.com/hy96/p/11593391.html

Copyright © 2024 Longsheng All rights reserved