XYX's Blog 首页归档标签分类相册
Gulp
|自动化构建工具
字数总计: 1.4k|阅读时长: 6 分钟

序

gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器

Gulp

  • 中文主页: http://www.gulpjs.com.cn/
  • gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器
  • 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务
  • gulp更高效(异步多任务), 更易于使用, 插件高质量

安装

  • 举例创建一个简单的应用gulp_test
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    |- dist//放打包生成的文件
    |- src
      |- js
      |- css
      |- less
    |- index.html
    |- gulpfile.js-----gulp配置文件
    |- package.json
      {
        "name": "gulp_test",
        "version": "1.0.0"
      }
  • 安装nodejs, 查看版本
    1
    node -v
  • 安装gulp:
    • 全局安装gulp
      1
      npm install gulp -g
    • 局部安装gulp
      1
      2
      npm install gulp@3.9.1 --save-dev 
      //以下指令都是3.9版本的，4.0以上版本指令与3.9不同
    • 配置编码: gulpfile.js
      1
      2
      3
      4
      5
      6
      7
      //引入gulp模块
      var gulp = require('gulp');
      //定义默认任务
      gulp.task('任务名', function() {
        // 将你的任务的任务代码放在这
      });
      gulp.task('default', ['任务'])//异步执行
    • 构建命令: 
      1
      gulp

      使用gulp插件

    • 相关插件:
      • gulp-concat : 合并文件(js/css)
      • gulp-uglify : 压缩js文件
      • gulp-rename : 文件重命名
      • gulp-less : 编译less
      • gulp-clean-css : 压缩css
      • gulp-livereload : 实时自动编译刷新
    • 重要API
      • gulp.src(filePath/pathArr) :
        • 指向指定路径的所有文件, 返回文件流对象
        • 用于读取文件
      • gulp.dest(dirPath/pathArr)
        • 指向指定的所有文件夹
        • 用于向文件夹中输出文件
      • gulp.task(name, [deps], fn)
        • 定义一个任务
      • gulp.watch()
        • 监视文件的变化

处理js

  • 下载插件: 
    1
    npm install gulp-concat gulp-uglify gulp-rename --save-dev
  • 配置编码 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');

    gulp.task('minifyjs', function() {
        return gulp.src('src/js/*.js') //找到操作的源文件，将文件读取到gulp的内存
            .pipe(concat('built.js')) //合并到临时文件     
            .pipe(gulp.dest('dist/js')) //临时生成到目标文件夹
            .pipe(rename({suffix: '.min'})) //重命名（后缀名+min）  
            .pipe(uglify())    //压缩
            .pipe(gulp.dest('dist/js'));//生成到目标文件夹
    });

    gulp.task('default', ['minifyjs']);
  • 页面引入js浏览测试 : index.html 
    1
    <script type="text/javascript" src="dist/js/built.min.js"></script>
  • 打包测试: gulp

处理css

  • 下载插件: 
    1
    npm install gulp-less gulp-clean-css --save-dev
  • 配置编码 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var less = require('gulp-less');
    var cleanCSS = require('gulp-clean-css');

    //less处理任务
    gulp.task('lessTask', function () {
    return gulp.src('src/less/*.less')
        .pipe(less())               //编译less文件为css文件
        .pipe(gulp.dest('src/css'));
    })

    //css处理任务, 指定依赖的任务,当lessTask执行完在执行该任务
    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'})) //兼容到ie8
        .pipe(gulp.dest('dist/css'));
    });

    gulp.task('default', ['minifyjs', 'cssTask']);
  • 页面引入css浏览测试 : index.html 
    1
    <link rel="stylesheet" href="dist/css/built.min.css">
  • 打包测试: gulp

处理html

  • 下载插件: 
    1
    npm install gulp-htmlmin --save-dev
  • 配置编码 
    1
    2
    3
    4
    5
    6
    7
    8
    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']);
  • 修改页面引入 
    1
    2
    <link rel="stylesheet" href="css/built.min.css">
    <script type="text/javascript" src="js/built.min.js"></script>
  • 打包测试: gulp

自动编译

  • 下载插件 
    1
    npm install gulp-livereload --save-dev
  • 配置编码: 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var livereload = require('gulp-livereload');
            
    //所有的pipe
    .pipe(livereload());

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

热加载(实时加载)

  • 下载插件：gulp-connect
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    1、npm install gulp-connect --save-dev

    2、注册 热加载的任务 server，注意依赖build任务 
    gulp.task('watch', ['default'], function () {}

    3、注册热加载的任务
        //配置加载的选项
        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']);

扩展

  • 打包加载gulp插件
  • 前提：将插件下载好。
  • 下载打包插件： gulp-load-plugins
  • npm install gulp-load-plugins –save-dev
  • 引入： var $ = require(‘gulp-load-plugins’)();！！！引入的插件是个方法，必须记住调用。
  • 其他的插件不用再引入了
  • 使用方法： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    * 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：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())
    });
Gulp