码迷,mamicode.com
首页 > 其他好文 > 详细

gulp操作

时间:2017-04-04 21:44:49      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:lmin   master   span   white   之间   ring   指定   需要   目的   

流行框架

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进行压缩

    // 新建一个任务,对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‘])
})

gulp操作

标签:lmin   master   span   white   之间   ring   指定   需要   目的   

原文地址:http://www.cnblogs.com/lin-dong/p/6666397.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!