gulp自动化构建教程

gulp及gulpfile.js编写示例

 

 本文主要记录一个gulpfile.js示例，以免以后用的时候遗忘。但首先还是要了解gulp是什么以及如何使用。

一、什么是gulp

简单来说：就是压缩前端代码，实现浏览器自动刷新的工具。

完整地说：gulp是一个前端的自动化构建工具，是基于Node.js的自动化任务运行期，能自动化完成javascript/sass/less/html/image/css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成、并监听文件在改动后重复指定（在gulpfile.js中指定）的这些步骤。

二、使用步骤

1、全局安装

（1）安装NodeJS环境：（这里直接使用淘宝镜像）

在cmd中输入：npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就开始下载安装，如下图:

（2）全局安装gulp：

上一步安装结束后，再在cmd下接着输入（这里cnpm也可换成npm，cnpm是在淘宝镜像下载，npm是在国外官网下载，实际上两者相同，这里就看心情选择吧^^）：cnpm install gulp -g

2、局部安装：

（1）在项目中生成package.json文件：

全局安装完成后，开始局部安装。首先，选择一个文件夹，这个文件夹就是你项目的最外层文件夹，在这个文件夹下打开cmd（比如我自己来说，有一个项目名为a，那我就在a下的文件夹里边打开cmd）。

在上图所示的cmd中输入：cnpm init -y，等待下载安装

（2）在项目本地安装gulp：

上一步安装完成后，接着输入：cnpm install gulp --sava-dev

（3）安装gulp插件：

插件介绍：gulp-clean-css（压缩css的插件）、gulp-htmlmin（压缩html的插件）、gulp-uglify（压缩js）、gulp-babel（将es6转换成es5）、gulp-rename（重命名）、gulp-connect（部署静态资源，实现自动刷新）。。。还有很多，可在https://www.npmjs.com/package中搜索插件

安装插件：（2）下载安装完成后，继续输入：cnpm i 插件名 -D）（比如：cnpm i gulp-clean-css -D），等待下载安装

（4）在项目根目录下，创建gulpfile.js，在里面书写代码，用于操控插件：书写内容详情见 三 。

（5）执行任务：（3）安装完成并（4）中的gulpfile.js编写完成后，接着在cmd中输入：gulp 任务名称

三、gulpfile.js编写：

//定义变量，引入gulp及各个插件

const gulp = require("gulp"),
    sass = require("gulp-sass"),
    connect = require("gulp-connect"),
    uglify = require("gulp-uglify"),
    babel = require("gulp-babel"),
    htmlmin = require("gulp-htmlmin");

// 编译SCSS文件
gulp.task("sass", function() {
    gulp.src("./src/scss/*.scss")
        .pipe(sass({outputStyle:"compressed"}))
        .pipe(gulp.dest("./src/css"))
        .pipe(connect.reload());
});
// html文件修改刷新
gulp.task("html", function() {
    gulp.src("./src/**/*.html")
        .pipe(connect.reload());
});
// js文件修改刷新
gulp.task("js", function() {
    gulp.src("./src/js/*.js")
        .pipe(connect.reload());
});
// 启动服务器
gulp.task("connect", function() {
    connect.server({
        root : "src",
        livereload : true
    });
});
// 监视任务
gulp.task("watch", function(){
    gulp.watch("./src/**/*.html", ["html"]);
    gulp.watch("./src/js/*.js", ["js"]);
    gulp.watch("./src/scss/*.scss", ["sass"]);
});
// 开发环境下的gulp任务
gulp.task("dev", ["sass", "html", "js", "connect", "watch"]);

/***************************************************************/
// 生产环境下的 gulp 任务，将项目生成到 dist 目录下
// dist 目录下的资源是直接用于生产环境（发布项目）的资源
// 编译SCSS文件：生产环境
gulp.task("prod_sass", function() {
    gulp.src("./src/scss/*.scss")
        .pipe(sass({outputStyle:"compressed"}))
        .pipe(gulp.dest("./dist/css"))
        .pipe(connect.reload());
});
// html文件压缩
gulp.task("prod_html", function() {
    gulp.src("./src/**/*.html")
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest("./dist"))
        .pipe(connect.reload());
});
// JS转换及压缩
gulp.task("prod_js", function() {
    gulp.src("./src/js/*.js")
        .pipe(babel({
            presets: ['env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest("./dist/js"))
        .pipe(connect.reload());
});
// 复制源文件夹下资源到目标文件夹
gulp.task("copy-images", function() {
    gulp.src("./src/images/**/*.*")
        .pipe(gulp.dest("./dist/images"));
});
gulp.task("copy-lib", function() {
    gulp.src("./src/lib/**/*.*")
        .pipe(gulp.dest("./dist/lib"));
});
gulp.task("prod_copy", ["copy-images", "copy-lib"]);
// 监视任务
gulp.task("prod_watch", function(){
    gulp.watch("./src/**/*.html", ["prod_html"]);
    gulp.watch("./src/js/*.js", ["prod_js"]);
    gulp.watch("./src/scss/*.scss", ["prod_sass"]);
});
// 启动服务器
gulp.task("prod_connect", function() {
    connect.server({
        root : "dist",
        livereload : true
    });
});
// 生产环境gulp任务
gulp.task("production", ["prod_sass", "prod_html", "prod_js", "prod_copy", "prod_connect", "prod_watch"]);