网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

gulp初探-创新互联

一、gulp 的简介

主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、响应式网站、程序开发、微网站、微信小程序等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站建设、做网站、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体,具备承接不同规模与类型的建设项目的能力。

       基于 node.js 流的自动化构建工具,可以快速构建项目并减少频繁的 I/0 操作,还可以利用 gulp 插件完成各种自动化任务。gulp 是基于 node.js 的自动任务运行器,它能自动化地完成 javascript/coffee/sass/less/html/p_w_picpath/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,它借鉴了 Unix 操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用 gulp 来改变开发流程,从而使开发更加快速,高效。

       gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建。

       gulp 学习常用地址:

                    gulp 官方网址:https://gulpjs.com/

                    gulp 插件地址:https://gulpjs.com/plugins/

                    gulp 官方 API:http://www.gulpjs.com.cn/docs/api/

                    gulp 中文文档:http://www.gulpjs.com.cn/docs/

                    淘宝 npm 镜像站:http://npm.taobao.org/

二,安装 node.js 和 npm(gulp 和 gulp 插件是通过 npm 安装并管理的,npm 是 node.js 的包管理器)

1、node.js 下载地址

       http://www.nodejs.org/download/

2、安装完成后,可通过命令行更新 npm 版本,保证是最新的

      npm  update npm  -g

PS:安装好 node.js 之后,可以在你的终端中输入“node -v”命令来查看 node.js 的版本,也顺便检测 node.js 是否安装成功。

3、安装 cnmp 命令(选装)

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

PS:npm 安装插件是从国外服务器下载,受网络影响大,甚至还会遇到需要×××才能下载插件的情况,因此推荐安装 cnpm。cnpm 跟 npm 用法完全一致,只是在执行命令时将 npm 改为 cnpm。

4、检测 cnpm 是否安装成功

       cnpm -v         // 显示版本号即安装成功

三、安装 gulp

1、提供 package.json 配置文件(package.json 文件用于保存项目元数据)

{
   "name": "demo",
   "version": "1.1.0",
   "description": "demo",
   "devDependencies": {
      "gulp": "^3.8.11"
   }
}

PS:package.json 是我们 gulp 项目的核心配置文件,用于设置将要执行操作的项目名称,版本,描述,依赖等信息,其格式为 json 数据格式。package.json 文件是每个 gulp 项目必备的文件,因此首要条件需要先创建这个文件。创建 package.json 文件方式有很多种:

          1、在终端通过“npm init”命令自动创建一个基本的 package.json 文件;

          2、从官网上复制或者下载一个 package.json 文件;

          3、手工创建一个 package.json 文件;

2、全局安装 gulp

      npm install -g gulp

3、在终端下通过命令进入到项目的根目录

      cd F:\wamp\www\gulp       // 切换到项目根目录

4、作为项目的开发依赖安装(本地安装)

       npm install --save-dev gulp

PS:全局安装 gulp 是为了执行 gulp 任务,本地安装 gulp 则是为了调用 gulp 插件的功能。

5、执行“npm install”命令安装项目依赖的插件(安装成功后会在项目根目录下的  node_modules 文件夹里)

       npm install    // 此命令会批量安装 package.json 文件内 "devDependencies" 中所有依赖插件

6、在配置好 package.json 文件后也可以使用命令安装 gulp 项目依赖的插件(package.json 文件会自动更新)

       npm install gulp-rename --save-dev

PS:这种安装一律是如下形式: npm install –save-dev,不仅会安装指定的 插件,还会将插件信息自动添加到  package.json 文件的 "devDependencies" 区域中,且包括插件名称,版本范围。

四、gulpfile.js  文件的配置(package.json 和 gulpfile.js 文件都要放置到项目的根目录下)

1、提供 gulpfile.js 配置文件

// 装载 gulp 插件
var gulp = require('gulp');

// 自定义任务
gulp.task('default', function() {
      // 将你的默认的任务代码放在这
});

2、最后在终端运行 gulp

      gulp

五、gulp 常用插件介绍

gulp-uglify —— 压缩 javascript 文件;
gulp-clean-css —— 压缩 css 文件;
gulp-concat —— 合并文件;
gulp-jshint —— js 文件语法检测;
gulp-sass —— sass 编译;
gulp-less —— less 编译;
gulp-autoprefixer —— 自动添加 css 前缀;
gulp-p_w_picpathmin —— 图片压缩;
gulp-livereload —— 浏览器自动刷新;
gulp-rename —— 文件重命名;

PS:以上这些插件,本套教程不会全部讲到。但是随着讲解其中的一部分,我想你就能掌握使用 gulp 插件的方法。知道方法了,然后你就可以参考官方文档去使用你想要的插件。

六、总结

1、安装 node.js 和 npm;

2、新建 package.json 文件;

3、全局和本地安装 gulp;

4、安装 gulp 插件;

5、新建 gulpfile.js 文件;

6、通过命令提示符运行 gulp 任务;

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:gulp初探-创新互联
当前URL:http://bjjierui.cn/article/goeic.html

其他资讯