zoukankan      html  css  js  c++  java
  • gulp

    概念:
    + 前端自动化流式构建工具
    + 我们可以使用gulp编写一些机械化的任务,即告诉它我们想要做什么,当需要做这件事情的时候,执行任务即可.
    + 有效提高开发效率 改善开发体验
    - 说明
    + gulp这个工具依赖node环境 所以在使用gulp之前需要安装node环境
    + 就像我们使用bootstrap要先引入jQuery是一个道理
    + 编写gulp任务使用JS语法,所以它相当的简单
    - 下载gulp
    + npm install gulp
    + 在项目的根目录运行这个命令,会自动生成一个node_modules文件夹 gulp会被下载到这个文件夹中.
    + node_modules文件夹中除了gulp以外,还会多出很多文件,这些都是gulp所要依赖的文件.具体依赖了哪些不需要开发人员关注.gulp本身会自动管理

    -使用gulp编写任务
    + gulp要求我们在项目的根目录下新建一个gulpfile.js文件,这个文件是专门用来编写gulp任务的.
    + 就像使用angularjs框架需要引包一样,要使用gulp也需要引包
    ```javascript
    // require('包名') 引包
    var gulp = require('gulp');
    // gulp变量是对象类型
    // 我们编写任务 处理任务需要用到gulp对象下面的方法

    gulp中提供的方法:
    + gulp.src() 获取任务要处理的文件
    + gulp.dest() 输出文件
    + gulp.task() 建立gulp任务
    + gulp.watch() 监控文件的变化
    + gulp本身提供的方法不多,大多数的任务都是由插件完成的

    - [gulp插件地址](https://gulpjs.com/plugins/)
    + 图片压缩 [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin)
    + CSS压缩 [gulp-clean-css](https://github.com/scniro/gulp-clean-css)
    + JS压缩 [gulp-uglify](https://github.com/terinjokes/gulp-uglify)
    + HTML压缩 [gulp-htmlmin](https://github.com/jonschlinkert/gulp-htmlmin)
    + 文件合并 [gulp-concat](https://github.com/contra/gulp-concat)
    + LESS转换CSS [gulp-less](https://www.npmjs.com/package/gulp-less)
    + es6转es5 [gulp-babel](https://www.npmjs.com/package/gulp-babel/)
    + 静态资源服务 [gulp-browser-sync](http://www.browsersync.cn/docs/gulp/)

  • 相关阅读:
    HashMap按键排序和按值排序
    LeetCode 91. Decode Ways
    LeetCode 459. Repeated Substring Pattern
    JVM
    LeetCode 385. Mini Parse
    LeetCode 319. Bulb Switcher
    LeetCode 343. Integer Break
    LeetCode 397. Integer Replacement
    LeetCode 3. Longest Substring Without Repeating Characters
    linux-网络数据包抓取-tcpdump
  • 原文地址:https://www.cnblogs.com/fanjuncheng666/p/9469436.html
Copyright © 2011-2022 走看看