gulp操作

流行框架

ssh方式上传代码

公钥私钥,两者之间是有关联的。
生成公钥,和私钥
- ssh-keygen -t rsa -C "xiaoming@sina.com"

在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'])
})