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. 先下载插件文件
• 2. 引入插件文件

/**
 * 使用第三方插件的步骤：
 * 
 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"]);