今天专门拿一个小页面来当 demo 来测试一下
gulp
的实际应用。过程中自然是各种小问题陆续呈现、各种自我需求不断促使去完善。目前折腾出一个为自己所需的、较为完整的 demo ,准备当作后续模板改编应用。
走一次顺序:
局部安装
新建目录 gulp_test
,并在该目录下局部安装 gulp :
|
|
局部安装完后,目录 gulp_test
下出现文件夹 node_modules
。
安装插件
所需要的插件简介:
|
|
目录 gulp_test
下安装插件:1npm install gulp-minify-css gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-rename gulp-htmlmin --save-dev
安装完插件后,目录 node_modules
下多了7个插件的相应文件夹。
创建项目目录结构
- 在项目根目录
gulp_test
下,新建gulpfile.js
文件; - 在项目根目录
gulp_test
下,新建文件夹src
,用于存放生产环境代码,并把自己的项目代码放进去; - 在项目根目录
gulp_test
下,新建文件夹dist
,用于存放被 gulp 处理过的发布环境代码;
此时的项目代码结构为:
编辑 gulpfile.js 文件
直接上 code ,里面有详细注释:
|
|
执行 gulp
在根目录下,执行命令:
|
|
成功之后,会在 dist
文件夹下生成已经被处理过各文件;
命令行显示如下、并且一直监视 watch
着指定的文件是否改动保存过:
|
|
此时的目录结构,原本为空的文件夹 dist
目录,里面出现了被 gulp
处理过各文件。
遇到的一些问题
- 各任务
task
是异步执行的,出现过报错,大概是文件不存在、无法处理;只要在各任务task
的pipe
管道 前加上return
即可。 - 将多个监视放在一个任务
task
里面时,忘记把该名为watch
的任务task
放在:默认预设任务default
的数组里面;导致文件修改保存后没被监视到。 - 注意
dist
和src
中代码里的引用的路径、文件名的问题。
更多 gulp
的使用,还得继续在实践应用中摸索啦!