美文网首页
浅谈web前端自动化工具--gulp

浅谈web前端自动化工具--gulp

作者: 车大棒 | 来源:发表于2016-11-29 10:20 被阅读244次

    背景:

    在前端的开发中上线之前可能会做的事情:

    1、文件目录调整HTML注释、换行等操作。
    2、CSS压缩合并、JS代码压缩重命名。
    3、CSS语法检测
    4.、.......

    上述这些操作是重复而枯燥的,如果是人工来一项一项做,会浪费大量时间。而且人工操作有时候还会带来一些想不到的bug。例如css改动导致页面错位、js改动可能导致功能不正常。

    这个时候web前端自动化工具就出现了,当然前端的飞速发展。各种web前端自动化工具也层出不穷,这里就浅谈一下我个人用的web前端自动化工具--gulp

    web前端自动化构建工具

    1、准备工作

    1.1、 打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。然后像安装QQ一样安装它就可以了(安装路径随意)。因为在安装并使用gulp的时候,需要先安装node.js.利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。

    node.js官网

    1.2、 安装好了之后,打开cmd命令行输入node -v,用来检测是否安装成功。如安装成功则提示node.js的版本号。

    1.3 、 由于nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 **npm -v **来测试是否成功安装。同上述node.js方法一样,安装成功则提示npm的版本号。

    2、gulp全局安装

    2.1、说明:全局安装gulp目的是为了通过她执行gulp任务;
    2.2、安装:命令提示符执行npm install gulp -g
    2.3、查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。

    CMD版本检测

    3、新建一个package.json文件

    3.1、说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
    3.2、以我个人的一个项目当中的一个json文件为例

    package.json文件

    3.3、当然如果说手动配置这些东西,那么今天的主题估计就不能够称为web前端自动化了。这里我们通过CMD命令符执行npm init

    3.4、为了方便读者更好了解这个 npm init 的使用,我讲自己原本的package文件删除。重新执行npm init

    通过npm init 配置gulp文件

    4、安装gulp 本地服务

    4.1、进入该项目目录下,输入npm install gulp --save-dev
    4.2、 这个时候可能有人会问,为什么前面全局下安装了一个gulp,现在又在本地文件下还要安装gulp。我们全局安装了gulp,项目也安装了gulp。为啥装两遍??

    为什么要装2
    说明:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能,作为项目的开发依赖(devDependencies)。
    4.3、之后继续安装gulp插件。本示例以gulp-rename(文件重命名)和gulp-uglify(js代码压缩)为例,命令提示符分别执行**npm install gulp-rename --save-dev ** 和 npm install gulp-uglify --save-dev .
    4.4、CMD指令执行完毕之后,这个时候你的当前目录下,就生成了
    node_modules
    文件夹。 gulp项目文件夹

    5、新建gulpfile.js文件(重要)

    gulpfile.js这个入口文件,在前面已经出现了不少次数了。下面就开始关于gulpfile.js文件配置,还是以本人的项目代码为例:

    gulpfile.js

    6、gulp运行

    6.1、进入gulpfile文件下打开CMD,输入gulp dabang

    gulp dabang简易操作

    6.2、运行成功之后,最后我的文件夹当中出现一个js代码压缩,后缀名添加min的js文件。

    gulp自动压缩重命名后的chedabang.js文件

    7、小结

    7.1、安装nodejs;
    7.2、gulp全局安装npm install gulp -g
    7.3、项目文件安装本地gulp服务 npm install gulp-less --save-dev以及相应的gulp 插件
    7.4、新建package.json文件;
    7.5、新建gulpfile.js文件;
    7.6、通过命令提示符运行gulp任务

    以上就是关于web前端自动工具--gulp个人的简单一点的使用,更多gulp 插件以及API使用,请访问请查看 gulp中文网.

    注:以上就是个人对于gulp使用的一点心得,欢迎各位大佬( ̄ε(# ̄)打脸指教!!

    欢迎大佬指点

    相关文章

      网友评论

          本文标题:浅谈web前端自动化工具--gulp

          本文链接:https://www.haomeiwen.com/subject/aknopttx.html