zoukankan      html  css  js  c++  java
  • gulp自动化构建工具

      gulp 安装:

      1. 全局安装 npm i -g gulp-cli

            npm i -g gulp

      2. 局部安装 npm i gulp -D 

      然后 gulp 就安装完了

      Gulp是基于node的一个自动化构建工具,开发者可以使用它构建自动化工作流程(前端集成开发环境)。例如:网页自动刷新,CSS预处理,代码检测,图片压缩等功能,只需要简单的命令行就可以全部完成。使用它,可以简化工作,让你把重点放在功能的开发上,同时减少人为失误,提高开发的效率和质量。

      gulp 的三大功能:任务化,基于流,及 es6 的 导入和导出

      1. 任务化:就是我们每个文件处理都应该将其注册为任务

      2. 基于流:gulp,有一个特别好玩的点,就是他所有的文件执行都是在 gulp 内存中完成的,然后在 gulp 内存中将文件处理好了在返回给本地文件

        输入流:本地文件传到 gulp 的内存中

        输出流:在 gulp 中将数据操作完之后返回给本地

      3. es6 的模块化思想在 gulp 中也是可以使用的

      然后便是 gulp 的 api ,四个主流的 api

      src():目标原文件的路径,如果我们想对这个文件进行处理的话,第一步,就是要通过这个路径来找到这个原文件;

      dest():输出文件流,我们可以将处理好的文件放到指定的目录中

      task():任务化,我们每次对文件的处理,都要开启一个任务,然后才能对文件进行操作

      watch():监视,我们可以对文件进行监视,如果文件发生了修改,我们都可以捕捉到

      cd():当我们没有返回的东西的时候,都应该调用 cd() 来告诉 gulp,此方法结束了

      series():当我们通过一个 default ,来执行多个任务的时候,我们可以调用此 api ,并且他会按照顺序执行

      

      注意事项:

        1. gulp4.0 之后,我们的第二个参数就只能通过调用 api 来实现了,不能在写 [ ] 了, 

      错误的案例:这个 gulp3.0 的写法,我们如果想使用这种写法,那么我们的 gulp 就要指定版本了,网上大多还是 gulp3.0 的写法

      

        2. cd 的用法

         

        或者说我们没有使用 gulp.dest() 的话,我们都应该调用一个 cd() ,来告诉 gulp 此任务执行了

      

      好了,我们介绍完了 gulp 的基本用法了,现在我们来实践操作一把 (下面代码以同步到 gitee 网址:https://gitee.com/shanjun6/gulp_automation_construction

      开发前的准备:全部下载到开发环境中

      需要下载的插件有:

        gulp,gulp-concat(链接多个 js,或者 css 文件),gulp-less(编译 less 文件),gulp-clean-css(压缩 css 文件)

        gulp-connect(自动化编译),gulp-htmlmin(压缩 html 文件),gulp-livereload(自动化编译),gulp-rename(文件重命名)

        gulp-uglify(压缩 js 文件),open(自动打开浏览器)

      目录结构:

        

      我们所有的操作都要在 gulpfile.js 中完成

      下载完插件我们需要引入

        

      接下来我们是对 js 的操作,将 js 目录下,所有的 js 文件进行合并,然后进行压缩和重命名,.pipe 管道,相当于链式写法

        

      对 less 的操作,仅仅是 将其编译为 css,然后,放到 css 的目录下,交给 css 进行操作即可

        

      对 css 的操作,合并 css 目录下所有的 css 文件,然后压缩 及 重命名

        

      对 html 的操作,仅仅是将 index.html 进行压缩就好了

        

      我们的打包操作,仅仅是一键将所有的任务都执行一遍即可,这里注意 gulp4.0 不这样写报错

        

      下来我们开启全自动的服务,因为没有返回的内容,所以一定要调用 cd,且还要在每个任务后面调用 livereload() 及 connect.reload() 的方法

        

      开启服务器后,便要监视所有的文件,当文件进行修改时,会自动在浏览器上找到最新修改的内容,注意:这里的 js css less 都是要执行的任务

        

      然后,我们要配置自动化的服务,这样我们输入一个指令,便可以自动操作

        

      然后在终端中输入指令

        

      然后就可以运行了,且自动打开了浏览器

        

      

      以上便是简单配置自动化的全部内容,如果想看源码,则可以访问  https://gitee.com/shanjun6/gulp_automation_construction  

      将 文件下载下来,并在终端执行 cnpm i 和 gulp serve 的指令,便可以看到效果了

      

  • 相关阅读:
    class7-附
    class6-附
    class6
    class5-附
    class4-附
    class4
    class3-附【家庭资产配置】
    class2
    芒果绿的blog
    java网络爬虫基础学习(四)
  • 原文地址:https://www.cnblogs.com/shangjun6/p/11392852.html
Copyright © 2011-2022 走看看