1.gulp的使用

发布于 2022年 01月 23日 23:51

#目录

  1. Gulp
  2. 使用gulp插件
  3. 扩展

##1.Gulp

  • What?
  • 中文主页: http://www.gulpjs.com.cn/
  • gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器(任务化=》task 基于流=》pipe)
  • Why?
  • 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
  • gulp更高效(异步多任务), 更易于使用, 插件高质量 可以异步和同步
  • How?
  • 安装nodejs, 查看版本: node -v
  • 创建一个简单的应用gulp_test
	  |- dist
	  |- src
	    |- js
	    |- css
	    |- less
	  |- index.html
	  |- gulpfile.js-----gulp配置文件
	  |- package.json
	    {
	      "name": "gulp_test",
	      "version": "1.0.0"
	    }
  • 安装gulp:

    1. 全局安装gulp npm install gulp -g

    2. 局部安装gulp npm install gulp --save-dev

    3. 配置编码: gulpfile.js

    //引入gulp模块
    var gulp = require('gulp');
	gulp.task('任务名'，function()){}
    //定义默认任务
    gulp.task('default', function() {
      // 将你的默认的任务代码放在这
    });
  1. 构建命令: gulp

##2.使用gulp插件

  • 相关插件:

  • gulp-concat : 合并文件(js/css)

  • gulp-uglify : 压缩js文件

  • gulp-rename : 文件重命名

  • gulp-less : 编译less

  • gulp-clean-css : 压缩css

  • gulp-livereload : 实时自动编译刷新

  • gulp-htmlmin: 压缩html

  • gulp-image: 压缩图片

  • shelljs: gulp调命令

  • gulp-connect: 热加载

  • gulp-run-sequence: 简化任务调用的语法 （里面能写自己的逻辑，更加动态了）

  • vinyl-source-stream： gulp的viny流

  • open（不是gulp的插件）： 在用户首选的应用程序中打开文件或网址。

  • 重要API

  • gulp.task(name[, deps], fn)

    • 定义一个任务

  • gulp.src(filePath/pathArr) :

    • 指向指定路径的所有文件, 返回文件流对象
    • 用于读取文件

  • gulp.dest(dirPath/pathArr)

    • 指向指定的所有文件夹
    • 用于向文件夹中输出文件

  • gulp.watch(需要监视的文件，对应的任务)

    • 监视文件的变化

###1.处理js

  • 创建js文件
    • src/js/test1.js
    (function () {
      function add(num1, num2) {
        var num3 = 0;
        num1 = num2 + num3;
        return num1 + num2;
      }
      console.log(add(10, 30));
    })();
  • src/js/test2.js
    (function () {
      var arr = [2,3,4].map(function (item, index) {
          return item+1;
      });
      console.log(arr);
    })();

  • 下载插件:

    npm install gulp-concat gulp-uglify gulp-rename --save-dev //一次性引入多个

  • 配置编码：

  var gulp = require('gulp');
  var concat = require('gulp-concat');  // 引入
  var uglify = require('gulp-uglify');
  var rename = require('gulp-rename');
  
  gulp.task('minifyjs', function() {  //不写return是同步，写return 是异步，并且函数中得加一个参数 执行完后gulp内存释放掉
      return gulp.src('src/js/*.js') //操作目标源文件，将数据读取到gulp的内存
          .pipe(concat('built.js')) //合并到临时文件  指定合并后的文件名    
          .pipe(gulp.dest('dist/')) //临时输出文件到本地**目录下
          .pipe(rename({suffix: '.min'})) //重命名  suffix后缀名
          .pipe(uglify())    //压缩
          .pipe(gulp.dest('dist/'));
  });
  
  gulp.task('default', ['minifyjs']);

  • 页面引入js浏览测试 : index.html

  • 打包测试: gulp

###2.处理css

  • 创建less/css文件
    • src/css/test1.css
    #div1 {
      width: 100px;
      height: 100px;
      background: green;
    }
  • src/css/test2.css
    #div2 {
      width: 200px;
      height: 200px;
      background: blue;
    }
  • src/less/test3.less
    @base: yellow;
    .index1 { color: @base; }
    .index2 { color: green; }

  • 下载插件:

    npm install gulp-less gulp-clean-css --save-dev

  • 配置编码:

  var less = require('gulp-less');
  var cleanCSS = require('gulp-clean-css');
  
  //less处理任务
  gulp.task('lessTask', function () {
    return gulp.src('src/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('src/css'));
  })
  //css处理任务, 指定依赖的任务
  gulp.task('cssTask',['lessTask'], function () {
    return gulp.src('src/css/*.css')
        .pipe(concat('built.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(rename({suffix: '.min'}))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css'));
  });
  
  gulp.task('default', ['minifyjs', 'cssTask']);
  • 页面引入css浏览测试 : index.html
  • 打包测试: gulp

###3.处理html

  • 下载插件:
    npm install gulp-htmlmin --save-dev
  • 配置编码
    var htmlmin = require('gulp-htmlmin');
    //压缩html任务
    gulp.task('htmlMinify', function() {
        return gulp.src('index.html')
            .pipe(htmlmin({collapseWhitespace: true}))
            .pipe(gulp.dest('dist'));
    });
    gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']);
  • 修改页面引入 (注意路径)
    <link rel="stylesheet" href="css/built.min.css">
    <script type="text/javascript" src="js/built.min.js"></script>
  • 打包测试: gulp

###4.自动编译/刷新

  • 下载插件 npm install gulp-livereload --save-dev

  • 配置编码:

  var livereload = require('gulp-livereload');
            
  //所有的pipe()
  
  gulp.task('watch', ['default'], function () {    
    //开启监视
    livereload.listen();
    //监视指定的文件, 并指定对应的处理任务
    gulp.watch('src/js/*.js', ['minifyjs'])
    gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask']);
  });


每个任务下面加livereload();
gulp.task('minifyjs', function () {
return gulp.src('src/js/*.js')
    .pipe(concat('built.js'))
    .pipe(gulp.dest('build/'))
    .pipe(rename({suffix:'.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/'))
    .pipe(livereload())
});
  • 热加载(实时加载)
    • 下载插件：gulp-connect
    1、 npm install gulp-connect --save-dev
    2、 注册 热加载的任务 server，注意依赖build任务 
    3、 注册热加载的任务
        //配置加载的选项
		gulp.task('watch', ['default'], function () {   
        connect.server({
              root : 'dist/',//监视的源目标文件路径
              livereload : true,//是否实时刷新
              port : 5000//开启端口号
         });
         // 自动打开链接，不用自己手动输入了
         open('http://localhost:5000');//npm install open --save-dev
         // 监视目标文件
        gulp.watch('src/js/*.js', ['js']);
        gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']);// ['cssMin', 'less'] 中less也可以不写，因为执行cssMin任务前必须先执行less任务
		)}
  • 扩展
    • 打包加载gulp插件
    • 前提：将插件下载好。
    • 下载打包插件： gulp-load-plugins //gulp-load-plugins这个插件能自动帮你加载package.json文件里的gulp插件
    • npm install gulp-load-plugins --save-dev
    • 引入： var $ = require('gulp-load-plugins')();！！！引入的插件是个方法，必须记住调用。
    • 神来之笔：其他的插件不用再引入了
    • 注意：因为gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是 已经安装好了的
    • 使用方法：
      • 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin...
gulp.task('less', function () {
		return gulp.src('src/less/*.less')
    .pipe($.less())//将less转换为less
    .pipe(gulp.dest('src/css/'))//将转换为less的文件输出到src下
    .pipe($.livereload())//实时刷新
    .pipe($.connect.reload())
});

##3.扩展 /**/* 深度遍历 suffix 后缀名 插件的方法直接用，gulp的方法得写gulp

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

// var concat = require('gulp-concat');
// var uglify = require('gulp-uglify');
// var rename = require('gulp-rename');
// var less = require('gulp-less');
// var cssClean = require('gulp-clean-css');
// var htmlMin = require('gulp-htmlmin');
// var livereload = require('gulp-livereload');
// var connect = require('gulp-connect');
var open = require('open');

// 注册任务
// gulp.task('任务名', function () {
//     // 配置任务的操作
// })

// 注册合并压缩js的任务
gulp.task('js', function () {
  return gulp.src('src/js/*.js')  // 找到目标原文件，将数据读取到gulp的内存中
    .pipe($.concat('build.js'))   // 合并文件
    .pipe(gulp.dest('dist/js/')) // 临时输出文件到本地
    .pipe($.uglify())              // 压缩文件
    .pipe($.rename({suffix: '.min'}))// 重命名
    .pipe(gulp.dest('dist/js/'))
    .pipe($.livereload())  // 实时刷新
    .pipe($.connect.reload())
});

// 注册转换less的任务
gulp.task('less', function () {
  return gulp.src('src/less/*.less')
    .pipe($.less())  // 编译less文件为css文件
    .pipe(gulp.dest('src/css/'))
    .pipe($.livereload())  // 实时刷新
    .pipe($.connect.reload())
});

// 注册合并压缩css文件
gulp.task('css', ['less'], function () {
  return gulp.src('src/css/*.css')
    .pipe($.concat('build.css'))
    .pipe($.rename({suffix: '.min'}))
    .pipe($.cleanCss({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist/css/'))
    .pipe($.livereload())  // 实时刷新
    .pipe($.connect.reload())
});

// 注册压缩html的任务
gulp.task('html', function () {
  return gulp.src('index.html')
    .pipe($.htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest('dist/'))
    .pipe($.livereload())  // 实时刷新
    .pipe($.connect.reload())
});

// 注册监视任务(半自动)
gulp.task('watch', ['default'], function () {
  // 开启监听
  $.livereload.listen();
  // 确认监听的目标以及绑定相应的任务
  gulp.watch('src/js/*.js', ['js']);
  gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css'])
});


// 注册监视任务(全自动)
gulp.task('server', ['default'], function () {
  // 配置服务器的选项
  $.connect.server({
    root: 'dist/',
    livereload: true, // 实时刷新
    port: 5000
  });

  // open可以自动打开指定的连接
  open('http://localhost:5000/');

  // 确认监听的目标以及绑定相应的任务
  gulp.watch('src/js/*.js', ['js']);
  gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css'])
})


// 注册默认任务
gulp.task('default', ['js', 'less', 'css', 'html']);

##扩展 调试方案： 新建build文件夹

###模块化音悦台 使用了commonjs+browserify模块化工具 browserify： 根据一个入口自动寻找依赖并且自动合并入口跟依赖

###使用gulp打包非模块化的音悦台 js gulp-concat 合并 gulp-uglify 压缩 gulp-rename 重命名 css gulp-less 编译less文件 gulp-clean-css 压缩css html gulp-htmlmin 压缩html 图片 gulp-image 压缩图片 热加载 gulp.watch() 启动服务 gulp-connect open 自动刷新 在每一种文件的watch内调用pipe(connect.reload());

###使用gulp打包模块化的项目 js shelljs 调用它的exec方法去执行borwserify命令 mkdirp 因为borwserify命令不能自动创建目录，所有我们借助了mkdirp插件主动去创建目录 gulp-run-sequence 简化任务调用的语法 css gulp-less 编译less文件 gulp-clean-css 压缩css html gulp-htmlmin 压缩html 图片 gulp-image 压缩图片 热加载 gulp.watch() 启动服务 gulp-connect open 自动刷新 在每一种文件的watch内调用pipe(connect.reload());

###问题 js还能热加载？ js也还能自动刷新？ js还能压缩？ 生产：需要压缩 开发：不需要压缩 方法： 使用环境变量 怎么模块化第三方库？使用两个API vendor .require("./bower_components/vue/dist/vue.js",{expose: 'vue'}) .require("./bower_components/jquery/dist/jquery.js",{expose: 'jquery'}) gulp 里面vinyl 流 与node 中的 流 不同

推荐文章