Gulp入门指南

项目构建

• Gulp介绍

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

  

• 安装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:

  • 全局安装gulp

    npm install gulp -g

  • 局部安装gulp

    npm install gulp --save-dev

  • 配置编码: gulpfile.js

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

  • 构建命令:

    gulp

• 使用gulp插件

  • 相关插件:
  • gulp-concat : 合并文件(js/css)
  • gulp-uglify : 压缩js文件
  • gulp-rename : 文件重命名
  • gulp-less : 编译less
  • gulp-clean-css : 压缩css
  • gulp-livereload : 实时自动编译刷新
  • gulp-load-plugins:从包依赖关系中加载gulp插件，并将它们附加到选择的对象。
  • open：在用户的首选应用程序中打开文件或网址。
  • 重要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 {
        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

    <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']);
    });

  • 自动刷新页面

    • 下载插件

      npm install open

    • 测试访问:

    • 修改js/css/less页面会自动编译并刷新浏览器

  gulp.task('server',['build'], 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']);
  })

gulpfile.js 完整代码

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 cleanCss = 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('js',function () {
    return gulp.src('src/js/*.js')
        .pipe($.concat('build.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe($.uglify('dist/js/*.js'))
        .pipe($.rename({suffix:'.min'}))
        .pipe(gulp.dest('dist/js'))
        // .pipe(livereload())
        .pipe($.connect.reload());
})
gulp.task('less',function () {
    return gulp.src('src/less/*.less')
        .pipe($.less())
        .pipe(gulp.dest('src/css'))
        // .pipe(livereload())
        .pipe($.connect.reload());
});
gulp.task('cssMin',['less'],function () {
    return gulp.src('src/css/*.css')
        .pipe($.concat('build.css'))
        .pipe($.cleanCss())
        .pipe($.rename({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css/'))
        // .pipe(livereload())
        .pipe($.connect.reload());
});
gulp.task('htmlMin',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/less/*.less','src/css/*.css'],['less','cssMin'])
// });
//全自动加载任务
gulp.task('server',['build'],function () {
    $.connect.server({
        root:'dist/',
        livereload:true,
        port:5000
    })
    open('http://localhost:5000');
    gulp.watch('src/js/*.js',['js']);
    gulp.watch(['src/less/*.less','src/css/*.css'],['less','cssMin'])
});
gulp.task('build',['js','less','cssMin','htmlMin'])
gulp.task('default',['server']);