gulp操作

Posted 2020-09-08 凛冬

流行框架

ssh方式上传代码

• 公钥 私钥,两者之间是有关联的。
• 生成公钥,和私钥
  • ssh-keygen -t rsa -C "[email protected]"

在push和pull操作进

• 先pull , 再push

• 当我们在push时，加上-u参数，那么在下一次push时 我们只需要写上git push就能上传我们的代码。(加上-u之后，git会把 当前分支与远程的指定的分支进行关联。git push origin master)

npm

• node package manager
• 管理项目的依赖包
• 可以用来下载我们需要使用的东西
• 安装后可以通过npm -v 查看版本

npm 使用

• 1.初始化操作
  • npm init 会生成一个package.json文件
  • npm init -y    也会生成一个package.json文件   -y 会跳过yes

• 2.下载所需要的包

  • npm install jquery 下载jquery
  • 会去 registry.npmjs.org 这个地址下载jquery
  • 会生成一个node_modules目录，下载的内容就放在这个目录

• 3.下载包时，可以加上 --save 参数

  • npm install jquery --save, 下载之后会在package.json中添加 当前下载的包的版本信息。

gulp

官网 中文网

• 前端自动化构建工具
• js: function(){//},代码压缩,混淆 : var name = 123,var x = 123
• css,
• 合并: 1个js 1kb ,有10个js.

5个核心方法

• gulp.task(‘任务名‘,function(){}) // 创建任务。
• gulp.src(‘./*.css‘) 指定想要处理的文件
• gulp.dest() // 指定最终处理后的文件的存放路径
• gulp.watch() // 自动的监视文件的变化，然后执行相应任务。
• gulp.run(‘任务名‘)，直接执行相应的任务。

安装gulp

• 通过npm安装:npm install gulp-cli -g

gulp使用

• 1.在当前项目中也要安装gulp: npm install gulp --save
• 2.还需要在当前项目中新建一个文件: gulpfile.js

    var gulp =  require(‘gulp‘);

    // 创建任务
    // 第一个参数: 任务名
    // 第二个参数: 回调函数,当我们执行任务时就会执行这个函数
    gulp.task(‘test‘, function(){
      console.log(123)
})

• 3.执行任务: gulp 任务名
  • 示例: gulp test

browser-sync

• 更改代码之后自动刷新浏览器
• 需要使用npm进行全局安装:npm install browser-sync -g,-g表示安装到全局
• 使用:browser-sync start --server --files "./index.html,app.css,./css/*.css,*.*"
• --files参数指定要监视的文件，后面跟要监视的文件的文件路径以逗号分隔。

对js进行压缩

• npm install gulp-uglify --save

对js进行合并操作

• npm install gulp-concat --save

    gulp.task(‘script‘, function(){
  // 1.要匹配到要处理的文件
  // 指定指定的文件:参数是匹配的规则
  // 参数也可以是数组，数组中的元素就是匹配的规则
  gulp.src([‘./app.js‘,‘./sign.js‘])
  // concat 的参数是合并之后的文件名字
  .pipe(concat(‘index.js‘))
  .pipe(uglify())
  // dest方法参数，指定输出文件的路径
  .pipe(gulp.dest(‘./dist‘))
})

对css进行压缩操作

• npm install gulp-cssnano --save

   // 新建一个任务，对css进行处理
gulp.task(‘style‘, function(){
  // 对项目中的2个css文件进行合并，压缩操作
  // 1.匹配到要处理的文件
  gulp.src([‘./*.css‘])
  // 2.合并文件
  .pipe(concat(‘index.css‘))
  // 3.压缩操作
  .pipe(cssnano())
  // 4.输出到指定目录
  .pipe(gulp.dest(‘./dist‘))
  })

对html进行压缩

• npm install gulp-htmlmin --save
• https://github.com/kangax/html-minifier

    // 新建一个任务，对html进行压缩
gulp.task(‘html‘, function(){
 // 1.匹配到要处理的文件
 gulp.src([‘./index.html‘])
 // 2.压缩操作
 .pipe(htmlmin({collapseWhitespace:true}))
 // 3.指定输出目录
 .pipe(gulp.dest(‘./dist‘))
})

gulp.watch

• 监视文件的变化，然后执行相应的任务
• gulp.run, 直接执行指定的任务

    // gulp.watch 监视文件变化，执行相应任务
  gulp.task(‘mywatch‘, function(){
  // 执行指定的任务
  gulp.run(‘script‘)
  // 1.监视js文件的变化，然后执行script任务
  // 第一个参数：要监视的文件的规则
  // 第二个参数：是要执行的任务
  gulp.watch([‘./app.js‘,‘sign.js‘],[‘script‘])
})