nodejs-第三方模块Gulp

gulp

• 注意node的版本控制 10.20.1左右 gulp版本3.9.1 不超过4

  • npm install gulp@3.9.1 --save-dev

• 作用

  • 处理文件打包 压缩
  • 文件编译（less sass styles es6 typescript …）
  • 基于流模式
    • 获取文件
      • 内容 地址 名称 格式等
    • 处理文件
      • 得到流 对流的内容进行压缩等处理
    • 写入文件
      • 处理后的流写入文件
  • 批量文件处理

• 下载方式

  • npm的方式

    npm install -g gulp //安装到全局 不推荐
    npm install gulp//放到项目里 推荐 通过npm run 启动
    //package.json start是固定的 dev随便起
      "scripts": {
        "start":"npm run dev",
        "dev": "node_modules/.bin/gulp"
        "Dev": "gulp" //简写 自动寻找
      },
    

  • Github

    https://www.github.com/gulp/
    

• 使用

  1. 项目根目录建立gulpfile.js 文件

  2. 重构项目的文件夹结构 src目录放置源代码文件 dest目录放置构建后文件

  3. 在gulpfile.js 中编写任务

     1. const gulp = require('gulp');
        gulp.task('name', function () {
            return gulp.src('../product/index.html')
                .pipe(gulp.dest('./'))
        });
        gulp.task('default', ['name']);
        

  4. 命令行执行gulp

• 核心API

  • run()//已废弃

  • src() 获取任务要处理的文件 并将文件转化stream流

    • gulp.src('url')
      

  • dest() 输出文件 将stream流写入文件

    • gulp.dest('url')
      

  • task() 建立gulp任务

    • gulp.task(name,[deps],fn)//任务名 依赖(可无) 回调
      gulp name//cmd命令行执行
      

  • watch() 监控文件的变化

    • 用法与task类似 一旦文件发生改动 就会执行相应的操作

    • gulp.watch('监听的url',回调函数fn)
      gulp.watch('监听的url',['任务'])
      gulp.watch('监听的url',['依赖的任务'],回调函数fn)
      

  • pipe() //处理文件的管道

    • gulp.src("./src/index.css").pipe(gulp.dest('./dist/css'));
      

• Globs语法

  • * //所有字符 如果路径分隔符在后面也包括 否则不包括
    ** //所有字符 包括路径分隔符/
    ？//任意一个字符 不包括路径分隔符/
    [] //字符集
    [^]//不包含的一个字符集
    []
    

gulp插件

• 压缩html

  • gulp-htmlmin
  • gulp-minify-html

• 压缩css

  • gulp-csso
  • gulp-minify-css

• 压缩js

  • gulp-uglify

    • gulp.pipe(gulp_uglify())
      

• 语法转换

  • gulp-babel //js语法转化
  • gulp-less //less语法转化

• 重命名

  • gulp-rename

    • const gulp = require('gulp');
      const gulp_rename = require('gulp-rename');//导入
      gulp.task('rename', () => {
          gulp.src('../product/index.html')
              .pipe(gulp_rename('起名字好难.txt'))
              .pipe(gulp.dest("./"));
      });
      gulp.task('default', ['rename'])
      

• 其他

  • gulp-file-include //公共文件包含
  • browsersync //浏览器实时同步

• 使用方法：

  1. 下载插件
  2. gulpfile.js引入插件
  3. 调用

package.json文件

1. npm init -y 生成（y不填写任何信息全部使用默认值）

  "name": "description",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { //别名
    "test": "echo \"Error: no test specified\" && exit 1" //npm run test  
  },
  "keywords": [], 
  "author": "",
  "license": "ISC", //协议
  "dependencies": { //项目依赖
    "formidable": "^1.2.2",
    "mime": "^2.4.6"
  },
  "devDependencies": {
    "gulp": "^4.0.2" //开发依赖
  }
}

2. npm install 自动下载当前项目所以来的第三方模块
3. npm install --production 只下载项目依赖
4. 别名的用法：npm run 别名 会运行右边的一坨长命令