gulp的使用

构建工具:
自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。
注意： gulp或者grunt都仅仅是一个操作平台，他们本身做不了任何事情，要做事情需要通过插件

1.gulp的使用

全局安装：
npm install --global gulp
创建项目：
LearnGulp
项目依赖安装：
npm install --save-dev gulp
在项目根目录下创建一个名为 gulpfile.js 的文件：

   var gulp = require('gulp');
      gulp.task('default', function() {
      // 将你的默认的任务代码放在这
  });

运行： gulp

2.gulp的方法

gulp.task(str,fn)
创建一个gulp任务
gulp.src(path)
文件来源
gulp.dest(path)
操作之后的文件到哪里去
.pipe(package)
执行一个gulp功能
gulp.watch()
监听
gulp.start()
执行gulp任务

3.插件

1.压缩JavaScript文件
1.安装插件
npm install --save-dev gulp-uglify
代码
gulp.task(“jsuglify”,function(){
gulp.src(“src/js/demo.js”)
.pipe(jsUglify())
.pipe(gulp.dest(“dist/js”))
})
2.压缩CSS文件
1.安装
npm install --save-dev gulp-minify-css
3.压缩HTML文件
1.安装
npm install --save-dev gulp-minify-html
4.图片压缩
npm install --save-dev gulp-imagemin
5.代码检查
npm install --save-dev gulp-jshint jshint
公司learder自己编写代码规范，按照他的规范来写代码！！！
6.合并、重命名：把多个文件合并，再命名为min.js
npm install --save-dev gulp-concat gulp-rename
7.Less编译为CSS文件
npm install --save-dev gulp-less
8.监听：当less改变时，css文件也发生改变
gulp.task(“watchLess”,function(){
gulp.watch(“src/css/*.less”,function(){
gulp.run(“reless”)
})
})
9.热更新：在不用刷新浏览器的情况下，当代码更新时，页面自动更新
1.命令：npm install gulp-livereload --save-dev
2.全局服务器：npm install -g http-server
3.浏览器打开：chrome://extensions/ 浏览器插件：LiveReload （直接点击启动）
4.编写热更新的代码
5.启动热更新
1.在项目根目录下启动http-server
2.启动热更新：hot
3.打开浏览器启动项目
4.启动浏览器（livereload）插件，将空心圆点成实心圆

4.代码

//引入
var gulp = require('gulp');
var jsUglify = require("gulp-uglify");
var cssUglify = require("gulp-minify-css");
var htmlUglify = require("gulp-minify-html")
var imageUglify = require("gulp-imagemin");
var jshint = require("gulp-jshint");   //检查
var codeConcat = require("gulp-concat");  //合并
var fileRename = require("gulp-rename"); //重命名
var reLess = require("gulp-less");

// 压缩JavaScript任务，task表示任务
gulp.task("jsuglify",function(){
   gulp.src("src/js/demo.js")
  // gulp.src(["src/js/demo.js","src/js/hello.js"])   //需要压缩两个文件时，可以使用数组
  //gulp.src("src/js/*.js")  //该目录下所有文件都压缩
      .pipe(jsUglify())                           //执行压缩任务
      .pipe(gulp.dest("dist/js"))   //压缩到此处
})

/*
执行方式：
一、在命令行中输入gulp jsuglify
二、
gulp.task('defalut',function(){
   gulp,start("jsuglify")
})
然后在命令行中输入gulp
 */

// 压缩CSS任务
gulp.task("cssuglify",function(){
  gulp.src("src/css/init.css")
      .pipe(cssUglify())
      .pipe(gulp.dest("dist/css"))
})

// 压缩HTML任务
gulp.task("htmlUglify",function(){
  gulp.src("src/index.html")
      .pipe(htmlUglify())
      .pipe(gulp.dest("dist/"))
})

// 压缩image任务
gulp.task("imageUglify",function(){
  gulp.src("src/images/*.{png,jpg,gif,ico,jpeg,svg}")   //所有格式的图片都生效
      .pipe(imageUglify({
          optimizationLevel: 5, //类型：Number  默认：3       取值范围：0-7（优化等级）
          progressive: true,    //类型：Boolean 默认：false    无损压缩jpg图片
          interlaced: true,     //类型：Boolean 默认：false       隔行扫描gif进行渲染
          multipass: true       //类型：Boolean 默认：false      多次优化svg直到完全优化
      }))
      .pipe(gulp.dest("dist/images"))
})

// 代码检查
gulp.task("jshint",function(){
  gulp.src("src/js/demo.js")
      .pipe(jshint())
      .pipe(jshint.reporter()) // 代码检查
})

// 合并、重命名、压缩
gulp.task("reconcat",function(){
  gulp.src("src/js/*.js")
      .pipe(codeConcat("app.js"))  //合并
      .pipe(fileRename({
        suffix:".min"
      }))                 //命名
      .pipe(jsUglify())  //压缩
      .pipe(gulp.dest("dist/js")) //指定目录
})

// 编译less文件
gulp.task("reless",function(){
  gulp.src("src/css/*.less")
      .pipe(reLess())
      .pipe(gulp.dest("dist/css"))
})

// 监听less的改变：发生改变就重新编译
//也可以监听js、html、css的改变
gulp.task("watchLess",function(){
  gulp.watch("src/css/*.less",function(){
    gulp.run("reless")   //重新执行编译
  })
})
//每修改一次less文件，需要ctr+s保存以后执行重新编译

// 任务
gulp.task('default', function() {
  gulp.start(["jsuglify","cssuglify"])    //可以执行多个任务
});

5.如何写一个工程

步骤：
1.写一个src文件，文件中是源码
2.readme.md中写注释
3.package.json中，在npm init中package name需要命名
4.gulpfile.js中进行构建
5.在命令行中把需要的压缩文件的语句一次全部写入，全部下载
注：一般不压缩html文件
6.写一个dist文件，将所有文件打包到dist文件中最终上线
将所有文件的压缩写在同一个任务中，一次执行
7.打包时，将已经打包的文件和未打包的文件分开，apps文件夹和libs文件夹
打包结束后，将原本打包好的文件copy到dist文件夹中
8.打包后，可能出现背景图片和字体的丢失，注意修改文件路径！！！

代码：

var gulp = require('gulp'); 
var jsUglify = require("gulp-uglify");
var cssUglify = require("gulp-minify-css");
var imageUglify = require("gulp-imagemin");
var codeConcat = require("gulp-concat");
var fileRename = require("gulp-rename");
var livereload = require("gulp-livereload");

// css 
gulp.task("cssfinal",function(){   gulp.src("src/css/app/*.css")
      .pipe(codeConcat("app.css"))
      //css文件有已经打包好的，放在libs中，未打包的放在apps中准备打包
      .pipe(fileRename({
        suffix:".min"
      }))
      .pipe(cssUglify())
      .pipe(gulp.dest("dist/css")) })


// js 
gulp.task("jsfinal",function(){   gulp.src("src/js/app/*.js")
      .pipe(codeConcat("app.js"))
      //js文件有已经打包好的，放在libs中，未打包的放在apps中准备打包
      .pipe(fileRename({
        suffix:".min"
      }))
      .pipe(jsUglify())
      .pipe(gulp.dest("dist/js")) })

// 图片
 gulp.task("imageUglify",function(){   gulp.src("src/images/*.{png,jpg,gif,ico,jpeg,svg}")
      .pipe(imageUglify({
          optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
          progressive: true,    //类型：Boolean 默认：false 无损压缩jpg图片
          interlaced: true,     //类型：Boolean 默认：false 隔行扫描gif进行渲染
          multipass: true       //类型：Boolean 默认：false 多次优化svg直到完全优化
      }))
      .pipe(gulp.dest("dist/images")) })

// 编写热更新代码
 gulp.task("hot",function(){   livereload.listen();   gulp.watch("src/index.html",function(event){
    livereload.changed(event.path);   }) })

//一键执行
 gulp.task('default', function() { 
  gulp.start(["cssfinal","jsfinal","imageUglify"])
   });