zoukankan      html  css  js  c++  java
  • 第三方模块:gulp模块

    一、Gulp的使用

      1. 使用npm install  gulp  下载gulp库文件

      2. 在项目根目录下简历gulpfile.js文件

      3. 重构项目的文件夹架构src目录放置源代码文件,dist目录防止构建后文件。

      4. 在gulpfile.js文件中编写任务

      5. 在命令行工具中执行gulp任务。

    二、Gulp中提供的方法

      1. gulp.src(0 获取任务要处理的文件

      2. gulp.dest() 输出文件

      3. gulp.tast()  简历gulp任务

      4. gulp.watch()  监控文件的变化

    /**
     * 以下代码实现的功能相当于复制了一些东西
     */
    
    // 引入gulp模块
    const gulp = require('gulp')
    // 使用gulp.task() 方法建立任务
    gulp.task('first',()=>{   // 这里first是任务名称,后面是回调函数,用来处理该任务的;
        // 获取要处理的文件
        gulp.src('./src/css/base.css')
    
        // 将处理后的文件输出到dist目录
        .pipe(gulp.dest('./dist/csss'))
    })
    

    三、安装gulp用的命令行工具:gulp-cli

      在终端中执行命令:npm install gulp-cli  -g

      通过执行该命令,可以在全局安装gulp的命令行工具。

      ** 安装好全局gulp命令工具以后,可以通过gulp命令执行文件了。

    【这几个链接里面有几个小问题的解决方案】

    https://blog.csdn.net/qq_41208114/article/details/79109269

    https://blog.csdn.net/WU5229485/article/details/90173693

    四、gulp 插件

      1. gulp-htmlmin :  HTML文件压缩插件

      2. gulp-csso  :  压缩css

      3. gulp-babel : JavaScript 语法转化   如es6转化成es5

      4. gulp-less : less语法转化

      5. gulp-uglify : 压缩混淆 JavaScript 

      6. gulp-file-include: 公共文件包含

      7. browsersync  浏览器实时同步

     **插件的使用很简单:只需要三步:

      1、下载插件

      2、引入插件

      3、使用插件

    例如:下载gulp-htmlmin插件

    1.  npm install  gulp-htmlmin

  • 相关阅读:
    redis sentinel搭建以及在jedis中使用
    redis入门指南书中概要
    mysql crash cource 书中实例
    图片服务器域名选择
    自行实现一个简易RPC框架
    webservice基础
    maven实战
    类似◇形的图形,四边都是对应的行数的数字。
    C 中随机数
    给特定的寄存器赋值,读特定的寄存器
  • 原文地址:https://www.cnblogs.com/jianguo221/p/11944054.html
Copyright © 2011-2022 走看看