Gulp自动化你的前端_html/css_WEB-ITnose

“1. 我为什么使用grunt； 2. 我为何放弃grunt转投 gulp； 3. 我为何放弃 gulp与grunt，转投 npmscripts； 4. 我为何放弃前端” ——司徒正美

前端（段子）界的发展突飞猛进，总感觉随时会跟不上技术潮流（其实我已经被甩开了一条街，so sad

选择在这样一个时机发布一篇 gulp 教程并不是我的初衷，第一次用 gulp 是在一年前，而这篇帖子在草稿箱里躺了一个多月，再不发出来说不定就过时了。

当我在用 gulp 时我用它做什么？

编译 sass 合并优化压缩 css 校验压缩 js 优化图片添加文件指纹（md5）组件化头部底部（include html）实时自动刷新… 总之，gulp是前端开发过程中对代码进行自动化构建的利器。它不仅能对资源进行优化，而且在开发过程中能够通过配置自动完成很多重复的任务，让我们可以专注于代码，提高工作效率。

然而总所周知的原因，国内到 npm服务器的连接很不稳定，如果你有V了个PN大可不必担心，也可通过设置 npm代理服务器的方式访问：

// 设置代理npm config set proxy="http://127.0.0.1:1080"// 删除代理npm config delete proxy

推荐一个简单的方案：使用淘宝 npm 镜像

“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”—— 淘宝团队点赞

npm config set registry="https://registry.npm.taobao.org"

接下来开始 gulp 教程：

准备工作：安装 node.js（推荐 TLS 版），并重启系统。

1. 全局安装 gulp

npm install gulp -g

2. 目录结构：

└── src/ 源码目录

├── build/ .html 组件

├── sass/ .scss .sass 文件

├── css/ .css 文件

├── js/ .js 文件

└── img/ 图片

└── dist/ 输出目录

└── package.json

└──

gulpfile.js

3. 关于 package.json

可以使用 npm init 配置，推荐直接写入初始内容：

{  "name": "gulp-build",  "version": "1.0.0",  "description": "Gulp.js",  "private": true}

对于完整的 package.json (比如别人的开源项目), 只需对整个项目执行 npm install 即可安装 package.json 文件中声明的所有插件模块。

4. 给项目目录安装 gulp

npm install gulp --save-dev

—save-dev 这个参数会将插件信息自动更新到 package.json 里，其中的 devDependencies 属性会随插件依赖的安装卸载而改变。

PS. Windows 7及以上，按住 Shift 再右键，选择在此处打开命令窗口。免去 cd 命令定位目录的烦恼。 5. 给项目目录安装常用的插件

PS.可与上一步同时进行

npm install gulp-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-file-include gulp-autoprefixer del --save-dev

插件将在配置文件里介绍，更多用法请参见相应的 GitHub 主页。

以上两个安装操作将会在项目目录下生成 node_modules 文件夹，相应的插件都在这里。

Windows 用户请注意，此文件夹可能无法删除无法复制无法移动，会出现诸如“ 包含名称过长且无法放入回收站”，“ 源文件名长度大于文件系统支持的长度。请尝试将其移动到具有较短路径名称的位置” 等等问题。使用一个简单的方式即可删除，使用 WinRAR “添加到压缩文件”，勾选压缩选项里的 “压缩后删除源文件” ，确定之后即可删除。

6. API

别看我，看它： http://www.gulpjs.com.cn/docs/api/

7. 代码示例

     嘿嘿嘿

代码中， ?rev=@@hash 是 gulp-rev-append 插件的指纹标识。

@@include('build/header.html')

内容

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did114329

更新时间：2022-11-17 阅读：30次