zoukankan      html  css  js  c++  java
  • GULP

    1.gulp介绍( http://www.gulpjs.com.cn/ )

    gulp 是前端开发过程中对代码进行构建的工具, 是自动化项目的构建利器; 她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;大大提高我们的工作效率。

    gulp安装

    npm install -g gulp 安装全局的gulp

    项目初始化 npm init

    npm install --save-dev gulp (新建目录---安装到项目目录下)项目依赖的环境

    gulp插件安装(编译/压缩/合并/即时刷新等)

    gulp-concat:合并js

    gulp-watch:监听任务

    gulp-uglify:压缩js

    gulp-rename:重命名

    gulp-imagemin:图片压缩

    gulp-sass : sass编译插件

    gulp-minify-html/gulp-minify-css:压缩html和css

    2.package.json文件----npm init配置文件package.json

    注意:npm init 时,用户需回答一些问题,然后在当前目录生成一个基本的package.json文件。package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称、 版本、许可证等元数据)。

    npm install命令根据package.json配置文件,自动下载所需的模块,就是配置项目所需的运行和开发环境。

    devDependencies 里面的插件只用于开发环境 --save-dev 或者 -D

    dependencies 是需要发布到生产环境的,且生产环境是真实的环境。 --save 或者 -S

    package.json文件的解释

    img

    3.gulp下面常用的方法

    gulp.task : 执行gulp任务

    gulp.src : 引入文件的目录

    gulp.dest : 输出文件目录设置

    gulp.run : 执行

    pipe : 管道流

    gulp.series(要执行的任务的名字,需要执行的函数):用于串行(顺序)执行
    gulp.parallel(要执行的任务的名字,需要执行的函数):用于并行执行

    4.应用

    ES6编码翻译转化为ES5

    三个插件:gulp-babel@7 babel-core babel-preset-es2015

    5.综合应用

    掌握gulp工具的使用;

    掌握gulp-babel的使用;

    Gulp官方插件网站找寻插件

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

    https://www.npmjs.com/ npm官网

  • 相关阅读:
    [JSOI2009] 游戏
    CF1148H Holy Diver
    [提高组集训2021] 模拟赛3
    CF1458F Range Diameter Sum
    [游记] CSP2021
    CF1396E Distance Matching
    CF1396D Rainbow Rectangles
    【LeetCode】1. 两数之和
    【随笔】开通博客园过程
    MyISAM与InnoDB的区别是什么?
  • 原文地址:https://www.cnblogs.com/zlf1914/p/12818325.html
Copyright © 2011-2022 走看看