gulp配置

新版的gulp

  • 可以使用gulp-cli工具
  • 不再支持同步任务
  • 处理异步队列series()方法
  • 高并发任务使用parallel()
  • Gulp 插件实质上是 Node 转换流(Transform Streams),它封装了通过管道(pipeline)转换文件的常见功能,通常是使用 .pipe() 方法并放在 src()dest() 之间。他们可以更改经过流(stream)的每个文件的文件名、元数据或文件内容。

gulp与grunt

  • Grunt主要是以文件为媒介来运行它的工作流,比如在Grunt中执行完一项任务后,会把结果写入到一个临时文件中,然后在这个临时文件内容的基础上执行其它任务,执行完成后又把结果写入到临时文件中,然后又以临时文件为基础继续执行其它任务,循环往复
  • Gulp中,使用的是(Node 流)stream,首先获取到需要的stream,然后可以通过stream的pipe()方法把流导入到你想要的地方,比如Gulp的插件中,经过插件处理后的流又可以继续导入到其他插件中,当然也可以把流写入到文件中。所以Gulp是以stream为媒介的,它不需要频繁的生成临时文件,这也是Gulp的速度比Grunt快的一个原因。

api及工作流程

工作流程

首先通过gulp.src()方法获取到要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中,gulp.dest()方法则把流中的内容写入到文件中

api

gulp.src(src) 匹配文件,获取文件流,src为需要获取的文件类型
gulp.dest(path) 写入文件,用来指定要生成的文件的目录,path为路径
gulp.task(name, array,fn) 定义任务,name是任务名,array是前置任务名,fn是本任务的内容
gulp.watch()用来监视文件的变化,当文件发生变化后,我们可以利用它来执行相应的任务

插件

自动加载插件gulp-load-plugins
重命名gulp-rename
js文件压缩gulp-uglify
css文件压缩gulp-minify-css
html文件压缩gulp-minify-html
js代码检查gulp-jshint
文件合并gulp-concat
less使用gulp-less
sass使用gulp-sass
图片压缩gulp-imagemin
自动刷新gulp-livereload

开发

  1. 全局安装 gulp
    npm i -g gulp
  2. 在项目中局部安装 gulp
    npm i gulp -D
  3. 创建文件 gulpfile.js
  4. 编写符合 gulp 规则的代码
  5. 在cmd 中执行 gulp或者gulp + 任务名
    gulp jsTask
    gulp(gulp+default)
开发环境下的配置
var gulp = require("gulp");
var clean = require("gulp-clean");
var sass = require("gulp-sass");
// 使异步任务队列化
var runSequence = require("run-sequence");
var autoprefixer = require("gulp-autoprefixer");
var babel = require("gulp-babel");
var fileInclude = require("gulp-file-include");
// 浏览器同步测试工具,它会启动一个静态服务器。
var browserSync = require("browser-sync");
// 1 清空 
/*  2 处理css sass
    2.1 将scss编译成css sass
    2.2 自动添加前缀  autoprefixer
*/

/*  3 处理js babel
    3.1 将es6转为es5 babel
*/

/*  4 处理html fileInclude
    4.1 公共模板 fileInclude
 */

/*  5 自动刷新 browserSync
    5.1 一启动页面和文件有修改时,重新触发编译 和 刷新页面
 */

/* 辅助工具
    a run-sequence 让任务按顺序执行
      runSequence("第一个任务,["同时进行的任务1",""同时任务2]")
      任务内都需要加 return
 */


// 01 清空
gulp.task("clean", function () {
  return gulp.src("./dist")
    .pipe(clean())
});

// 02 处理css
gulp.task("css", function () {
  return gulp.src("./src/css/**")
    .pipe(sass())
    .pipe(autoprefixer({
      // 主流浏览器的最新的两个版本
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest("./dist/css/"));
})

// 03 处理js
gulp.task("js", function () {
  return gulp.src("./src/js/**")
    .pipe(babel({
      // 智能选择编译
      presets: ['env']
    }))
    .pipe(gulp.dest("./dist/js/"))
})

// 04 处理html
gulp.task("html", function () {
  return gulp.src("./src/pages/**")
    .pipe(fileInclude({
      // 预定义前缀
      prefix: "@@",
      // 组件的路径
      basepath: "src/components"
    }))
    .pipe(gulp.dest("./dist/"));
})

// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("lib", function () {
  return gulp.src(["./src/lib/**"])
    .pipe(gulp.dest("./dist/lib"));
})
// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("static", function () {
  return gulp.src(["./src/static/**"])
    .pipe(gulp.dest("./dist/static"));
})

// 00 默认任务
gulp.task("default", function () {
  runSequence("clean", ["css", "js", "html", "static", "lib"], function () {
    browserSync.init({
      // 服务器设置
      server: {
        // 网站根路径
        baseDir: "./dist",
        // 入口文件
        index: "index.html"
      },
      // 端口号
      port: "8888",
      // 不出现页面提示
      notify: false
    });
    // 以下内容如果有改变,自动触发对应的任务,再刷新页面
    gulp.watch("./src/css/**", ["css"]).on("change", browserSync.reload);
    gulp.watch("./src/js/**", ["js"]).on("change", browserSync.reload);
    gulp.watch("./src/pages/**", ["html"]).on("change", browserSync.reload);
  })
})
生产环境下的配置
var gulp = require("gulp");
var clean = require("gulp-clean");
var sass = require("gulp-sass");
var runSequence = require("run-sequence");
var autoprefixer = require("gulp-autoprefixer");
var babel = require("gulp-babel");
var fileInclude = require("gulp-file-include");
var browserSync = require("browser-sync");
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
const rev = require("gulp-rev");
const revCollector = require("gulp-rev-collector");
// 1 清空 
/*  2 处理css sass
    2.1 将scss编译成css sass
    2.2 自动添加前缀  autoprefixer
    ++2.2 压缩css cssmin
*/

/*  3 处理js babel
    3.1 将es6转为es5 babel
    ++3.2 压缩和混淆js
*/

/*  4 处理html fileInclude
    4.1 公共模板 fileInclude
    ++4.2 压缩html
 */

/*  ??5 自动刷新 browserSync
    ??5.1 一启动页面和文件有修改时,重新触发编译 和 刷新页面
 */

/* 辅助工具
    a run-sequence 让任务按顺序执行
      runSequence("第一个任务,["同时进行的任务1",""同时任务2]")
      任务内都需要加 return
 */

/* 
    ++6 添加指纹
    ++6.1 给css添加指纹 rev
    ++6.2 给js添加指纹 rev
    ++6.3 将html中的文件引用改成带有指纹的 revCollector
 */


// 01 清空
gulp.task("clean", function () {
  return gulp.src("./dist")
    .pipe(clean())
});

// 02 处理css
gulp.task("css", function () {
  return gulp.src("./src/css/**")
    .pipe(sass())
    .pipe(autoprefixer({
      // 主流浏览器的最新的两个版本
      browsers: ['last 2 versions']
    }))
    // 压缩css
    .pipe(cssmin())
    // 6.1 添加css指纹
    .pipe(rev())
    .pipe(gulp.dest("./dist/css/"))
    .pipe(rev.manifest({
      path: "rev-css-mainfest.json"
    }))
    .pipe(gulp.dest("./src/rev/"));
})

// 03 处理js
gulp.task("js", function () {
  return gulp.src("./src/js/**")
    .pipe(babel({
      // 智能选择编译
      presets: ['env']
    }))
    .pipe(uglify({
      // 混淆和压缩js
      mangle: {
        toplevel: true
      }
    }))
    // 6.2 添加js指纹
    .pipe(rev())
    .pipe(gulp.dest("./dist/js/"))
    .pipe(rev.manifest({
      path: "rev-js-mainfest.json"
    }))
    .pipe(gulp.dest("./src/rev/"));
})

// 6.3 将html中的链接改成带有指纹的
gulp.task("revCollector", function () {
  return gulp.src(["./src/rev/*.json", "./dist/*.html"])
    .pipe(revCollector())
    .pipe(gulp.dest("./dist/"));
})

// 04 处理html
gulp.task("html", function () {
  return gulp.src("./src/pages/**")
    .pipe(fileInclude({
      // 预定义前缀
      prefix: "@@",
      // 组件的路径
      basepath: "src/components"
    }))
    .pipe(gulp.dest("./dist/"));
})

// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("lib", function () {
  return gulp.src(["./src/lib/**"])
    .pipe(gulp.dest("./dist/lib"));
})
// 05 复制第三方静态资源 如 jquery,图片,字体图标等
gulp.task("static", function () {
  return gulp.src(["./src/static/**"])
    .pipe(gulp.dest("./dist/static"));
})


// 00 默认任务
gulp.task("default", function () {
  runSequence("clean", ["css", "js", "html", "static", "lib"],"revCollector", function () {
    browserSync.init({
      // 服务器设置
      server: {
        // 网站根路径
        baseDir: "./dist",
        // 入口文件
        index: "index.html"
      },
      // 端口号
      port: "8888",
      // 不出现页面提示
      notify: false
    });
    // 以下内容如果有改变,自动触发对应的任务,再刷新页面
    gulp.watch("./src/css/**", ["css"]).on("change", browserSync.reload);
    gulp.watch("./src/js/**", ["js"]).on("change", browserSync.reload);
    gulp.watch("./src/pages/**", ["html"]).on("change", browserSync.reload);
  })
})

你可能感兴趣的:(gulp配置)