gulp 入门

gulp 介绍

Gulp 中文网

gulp 是一个前端自动化的工具【构建工具】,使用流(stream)来处理内容。

gulp 的主要用于:

1. 搭建 web 服务器

2. 使用预处理器 Sass，Less

3. 压缩优化资源，可以压缩 JS CSS Html 图片

4. 自动将更新变化的代码实时显示在浏览器【前端实时化】

5. js 降级,将我们写的 es6 语法转成 es5

使用指南

创建 package.json

1. 全局安装 gulp：

npm install --global gulp

2. 安装 gulp 到项目(制定版本)

npm i gulp@3.9.1 --sava-dev

3. 作为项目的开发依赖（devDependencies）安装：

npm install --save-dev gulp

4. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require("gulp");

gulp.task("default", function() {
  // 将你的默认的任务代码放在这
});

5. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入**gulp <task> <othertask>**。

//实例: gulpfile.js

//运行gulp任务

//引入gulp模块
var gulp = require("gulp");

// npm i --save-dev browser-sync gulp-sass gulp-minify-css gulp-autoprefixer

//浏览器同步 npm i browser-sync --save-dev
// var browserSync = require("browser-sync");
var browserSync = require("browser-sync").create();

//css
//gulp-sass
var sass = require("gulp-sass");
//gulp-minify-css
var minifyCss = require("gulp-minify-css");
//自动添加css前缀 gulp-autoprefixer
var autoPrefixer = require("gulp-autoprefixer");

//js
//gulp-babel @babel/preset-env @babel/core
// npm i gulp-babel @babel/preset-env @babel/core --save-dev
//js版本降级
var babel = require("gulp-babel");

//自定义任务
gulp.task("default", function() {
  // 启动本地静态服务器
  browserSync.init({
    server: "./src/"
  });
  //文件的监听 , 文件有修改是时,服务器自动刷新
  // ** 表示任意文件夹
  // **/*.html 表示任意文件夹里的任意html文件
  gulp.watch("./src/**/*.html").on("change", browserSync.reload);
  gulp.watch("./src/**/*.css").on("change", browserSync.reload);
  //sass文件更新,执行sass任务
  gulp.watch("./src/**/*.scss", ["sass"]);
  //js降级 , 通常不用实时监听,最后上传才运行
  // gulp.watch("./src/**/*.js", ["babel"]);
});

gulp.task("sass", function() {
  //src(路径)       读取文件
  //pipe(执行函数)  下一步执行
  //dest(路径)      输出目录
  return gulp
    .src("./src/sass/**/*.scss")
    .pipe(sass())
    .pipe(autoPrefixer())
    .pipe(minifyCss())
    .pipe(gulp.dest("./src/css/"));
});

gulp.task("babel", function() {
  gulp
    .src("./src/js/**/*.js")
    .pipe(
      babel({
        presets: ["@babel/env"]
      })
    )
    .pipe(gulp.dest("./dist/js"));
});

用于开发

下载配置好的 gulp 文件

点击这里gulpfile.js 和 package.json 下载

!> 注意:用于开发的文件夹命名为 src,src 里面的文件夹命名为js,scss,images

1. 把两个文件放入项目目录中,安装依赖请运行

npm i

2. 用于开发请运行

gulp dev

3. 开发完毕打包发布请运行

gulp pro