gulp 配置学习

gulp 配置学习

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

2. 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的 合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务

3. gulp更高效(异步多任务), 更易于使用, 插件高质量

|- dist
|- src
  |- js
  |- css
  |- less
|- index.html
|- gulpfile.js  -----gulp配置文件
|- package.json
  {
    "name": "gulp_test",
    "version": "1.0.0"
  } 

全局安装gulp：npm install gulp -g
局部安装gulp：npm install gulp --save-dev

配置编码: gulpfile.js
//引入gulp模块
var gulp = require('gulp');
//定义默认任务
gulp.task('任务名', function() {
  // 将你的任务的任务代码放在这
});
gulp.task('default', ['任务'])//异步执行
构建命令:
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

创建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 concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('minifyjs', function() {
    return gulp.src('src/js/*.js') //操作的源文件
        .pipe(concat('built.js')) //合并到临时文件     
        .pipe(gulp.dest('dist/js')) //生成到目标文件夹
        .pipe(rename({suffix: '.min'})) //重命名  
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['minifyjs']);

页面引入js浏览测试 : index.html
<script type="text/javascript" src="dist/js/built.min.js"></script>

打包测试: gulp

处理css

创建less/css文件
src/css/test1.css
#div1 {
   100px;
  height: 100px;
  background: green;
}

src/css/test2.css
#div2 {
   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
<link rel="stylesheet" href="dist/css/built.min.css">
<div id="div1" class="index1">div1111111</div>
<div id="div2" class="index2">div2222222</div>

打包测试: gulp

处理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

自动编译

• 下载插件

  npm install gulp-livereload --save-dev
  

• 配置编码:

  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、 npm install gulp-connect --save-dev
  2、 注册 热加载的任务 server，注意依赖build任务 
  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')();！！！引入的插件是个方法，必须记住调用。
  • 神来之笔：其他的插件不用再引入了
  • 使用方法：

    * 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：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())
    });

简易配置模板

// 简易配置模板
var gulp = require('gulp');
var $ = require('gulp-load-plugins')()//引入的是函数，调用以后返回的是对象


// var concat = require('gulp-concat');
// var rename = require('gulp-rename');
// var uglify = require('gulp-uglify');
// 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');

//注册合并压缩js的任务
gulp.task('js', function () {
    //你的任务执行 具体过程
    return gulp.src('src/js/*.js')//找目标原文件 将原文件的数据读取到gulp的内存中
        .pipe($.concat('build.js'))//合并js文件
        .pipe(gulp.dest('dist/js/'))//临时输出
        .pipe($.uglify())//压缩js文件
        .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(gulp.dest('dist/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', 'less']);
});

//注册一个全自动的任务
gulp.task('server',['default'], function () {
    //配置服务器选项
    $.connect.server({
        root : 'dist/',//监视的源目标文件路径
        livereload : true,//是否实时刷新
        port : 5000//开启端口号
    });
    open('http://localhost:5000/');

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

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