阅读 36

gulp笔记

如果已经全局安装过gulp,请执行 npm rm --global gulp 将 gulp 删除再继续以下操作

一、 使用gulp流程

1. 检查node、npm和npx是否正确安装,无则下载安装nodejs、npx

  • node --version

  • npm --version

  • npx --version

2. 安装gulp命令行工具

npm install --global gulp-cli

3. 创建项目目录并进入

npx mkdir my-project cd my-project

4. 在项目目录下创建package.json文件

npm init

  • 生成package.json文件,存放当前项目的配置文件

5. 安装gulp,作为开发时依赖项

npm install --save-dev gulp

  • 在当前项目里面安装gulp到本地
  • --save 将这个文件,安装到本地的当前文件夹
  • -dev 将安装gulp的信息保存在package.json里面

6. 检查gulp版本

gulp --version

7. 创建gulpfile文件

在项目根目录下创建一个名为gulpfile.js的文件,并在文件中输入以下内容:

function defaultTask(cb){
	cb();
}

exports.default = defaultTask
复制代码
  • 专门gulp去编写任务

8. 测试

在项目根目录下执行gulp命令

gulp

9. 给gulp添加插件

gulpjs.com/plugins/

使用第三方插件的步骤:

  • 先去下载插件到本地

cnpm install 插件名 --save-dev
cnpm i 插件名 -D

  • 通过require()引入文件
  • 查阅插件的用法

二、 第一个demo


/**
 * commonJS 规范
 * 1、 require()将这个模块引入
 * 2、使用这个模块上的函数
 */

const gulp = require("gulp");

//  编写第一个任务

/**
 * 第一个参数: 任务的名字  自定义
 * 第二个参数: 回调函数,任务执行的功能
 */

gulp.task("hello", function() {
    console.log("hello gulp file running……")
})

复制代码

三、gulp的基本使用



/**
 * gulp.src()  找到源文件路径
 * gulp.dest()  找到目的的文件路径, 如果设置这个目的文件路径不存在,会自动创建
 * pipe()   理解程序运行管道
 * 
 */

//  1. 整理.html 文件
gulp.task("copy-html", function() {
    return gulp.src("index.html")
        .pipe(gulp.dest("dist/"))
})

/**
 * 2. 静态文件
 * 拷贝图片
 */

gulp.task("image", function() {
    // return gulp.src("img/*.(jpg").pipe(gulp.dest("dist/img"));
    // return gulp.src("img/*.{jpg,png}").pipe(gulp.dest("dist/img"));

    // return gulp.src("img/*/*").pipe(gulp.dest("dist/img"));
    return gulp.src("img/**/*").pipe(gulp.dest("dist/img"));

})

/** 
 * 3. 拷贝多个文件到一个目录中
 */
gulp.task("data", function() {
    return gulp.src(["json/*.json", "xml/*.xml", "!xml/04.xml"])
        .pipe(gulp.dest("dist/data"))
})


/**
 * 4. 一次性执行多个任务
 * 
 * 通过异步并行执行
 */

gulp.task("build", ["copy-html", "data", "image"], function() {
    console.log("任务执行完毕")
})

复制代码

监听

/**
 * 监听,如果监听到文件有改变,会自动去执行对应的任务,更新数据
 */

gulp.task("watch", function() {
    /**
     * param1  文件的监听路径
     * param2  要去执行的任务
     */

    gulp.watch("index.html", ["copy-html"])
    gulp.watch("img/**/*", ["images"])
    gulp.watch(["json/*.json", "xml/*.xml", "!xml04.xml"], ["data"]);

})
复制代码

引入插件

    1. 先下载插件文件
    1. 引入插件文件
/**
 * 使用第三方插件的步骤:
 * 
 1.  先去下载插件到本地
    `cnpm install 插件名 --save-dev`<br/>
    `cnpm i 插件名 -D`

 2. 通过require()引入文件

 3. 查阅插件的用法

    开发版本 index.css
    上线版本 index.min.css

 */

//  压缩插件

const sass = require("gulp-sass");

// 压缩css  gulp-minify-css
const minifyCSS = require('gulp-minify-css');

// 重命名插件 gulp-rename
const rename = require('gulp-rename');


gulp.task("sass", function() {
    return gulp.src("stylesheet/index.scss")
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(rename("index.min.css"))
        .pipe(gulp.dest("dist/css"))
        .pipe(connect.reload());

})

/**
 * 处理js文件的插件
 * gulp-concat  合并文件
 * gulp-uglify  压缩js文件
 */
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");

gulp.task("scripts", function() {
    return gulp.src("javascript/*.js")
        .pipe(concat("index.js"))
        .pipe(uglify())
        .pipe(rename("index.min.js"))
        .pipe(gulp.dest("dist/js"))
        .pipe(connect.reload()); // 连接刷新
})

复制代码

启动服务器


/**
 * 监听,如果监听到文件有改变,会自动去执行对应的任务,更新数据
 */

gulp.task("watch", function() {
    /**
     * param1  文件的监听路径
     * param2  要去执行的任务
     */

    gulp.watch("index.html", ["copy-html"])
    gulp.watch("img/**/*", ["images"])
    gulp.watch(["json/*.json", "xml/*.xml", "!xml04.xml"], ["data"])
    gulp.watch("stylesheet/index.scss", ["sacss"])
    gulp.watch("javascript/*.js", ["scripts"])

})



/***
 * gulp-connect 启动一个服务器
 */

const connect = require("gulp-connect");

gulp.task("server", function() {

    connect.server({
        root: "dist", // 设置根目录
        port: 8888,
        livereload: true // 启动实时刷新功能

    })
})


// 同时启动监听服务, default 我们可以直接通过控制台 gulp 命令启动

gulp.task("default", ["watch", "server"]);
复制代码