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 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($.connect.reload());});gulp.task('less',function () {    return gulp.src('src/less/*.less')        .pipe($.less())        .pipe(gulp.dest('src/css'))        .pipe($.connect.reload());})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($.connect.reload());})gulp.task('html',function () {    return gulp.src('./index.html')        .pipe($.htmlmin({collapseWhitespace: true}))        .pipe(gulp.dest('dist/'))        .pipe($.connect.reload());})gulp.task('watch',['default'],function () {    livereload,listen();})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']);})gulp.task('build', ['js','less','css','html']);gulp.task('default',['server']);

---