gulp简单实用示例

项目结构

• src
  • components // 这里是一些公共html模板
  • css // 根据需要可以选择less或者sass
  • img // 可以根据需要建立下级目录
  • js // 公共脚本和页面脚本
  • lib // 公共资源和第三方脚本

上图

package.json代码

{
    "name": "projectname",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "gulp -f gulpfile.js default",
        "pro": "gulp -f gulppro.js default"
    },
    "keywords": [],
    "author": "apple-ping",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "del": "^5.1.0",
        "gulp-concat": "^2.6.1",
        "gulp-babel": "^7.0.0",
        "gulp-file-include": "^2.1.0",
        "gulp-htmlmin": "^5.0.1",
        "gulp-imagemin": "^6.1.0",
        "gulp-less": "^4.0.1",
        "gulp-sass": "^4.0.2", // 使用sass的下载
        "gulp-uglify": "^3.0.2"
    },
    "dependencies": {
        "browser-sync": "^2.26.7",
        "gulp": "^4.0.2",
        "gulp-minify-css": "^1.2.4"
    }
}

这里babel是有版本差异的，自行下载可能会有冲突

.babelrc代码

{
    "presets": [
        "es2015"
    ],
    "plugins": []
}

gulp.js代码

// 引入插件
const gulp = require("gulp");
const del = require("del"); // 先删除旧的文件 del
const less = require("gulp-less"); // 编译less文件
const htmlmin = require('gulp-htmlmin'); // 压缩html文件
const cssmin = require('gulp-minify-css'); // 压缩css文件
const imagemin = require('gulp-imagemin'); // 压缩img文件
const uglify = require("gulp-uglify"); // 压缩js文件
const babel = require("gulp-babel"); // es6转es5
const fileInclude = require("gulp-file-include"); // 模板引擎
const browserSync = require("browser-sync"); // 自动更新

// 删除 任务
gulp.task("del", () => {
    return del(["./dist"]);
});
//js 打包压缩
gulp.task("js", () => {
    return gulp
        .src(["./src/js/*.js", "./src/js/**/*.js"])
        .pipe(babel())
        .pipe(uglify()) //压缩
        .pipe(gulp.dest('./dist/js/'));
});
//css 打包压缩
gulp.task('css', () => {
    return gulp
        .src(["./src/css/*.less", "./src/css/**/*.less"])
        .pipe(less())
        // 这里是使用sass的示例
       	// .pipe(sass({
        //     outputStyle: 'expanded'
        // }).on('error', sass.logError))
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css/'))
});
// 图片压缩
gulp.task('img', () => {
    return gulp
        .src("./src/img/**")
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/img/'));
});
// html压缩
gulp.task('html', () => {
    return gulp
        .src(["src/page/*.html", "src/page/**/*.html"])
        .pipe(
            fileInclude({
                prefix: "@@",
                basepath: "src/components/",
            })
        )
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./dist/'));
});
// 执行 负责第三方插件 任务
gulp.task("lib", () => {
    return gulp
        .src("./src/lib/**")
        .pipe(gulp.dest("./dist/lib/"));
});
// 自动打开浏览器 和 监听文件的改变 刷新浏览器
gulp.task("autopage", () => {
    browserSync({
        server: {
            baseDir: "./dist"
        },
        port: 8888,
        // 取消页面刷新提示
        notify: false
    });
    // 监听html文件的改变 从而重新执行 html 任务   刷新浏览器
    gulp.watch(["src/page/*.html", "src/page/**/*.html", "src/components/*.html"], gulp.series(["html", "reload"]));
    // 监听 less文件， 重新执行 css 任务  刷新浏览器
    gulp.watch(["./src/css/*.less", "./src/css/**/*.less"], gulp.series(["css", "reload"]));
    // 监听 js文件， 重新执行 js 任务  刷新浏览器
    gulp.watch(["./src/js/*.js", "./src/js/**/*.js"], gulp.series(["js", "reload"]));
    // 监听 img文件， 重新执行 img 任务  刷新浏览器
    gulp.watch("./src/img/**", gulp.series(["img", "reload"]));
});

gulp.task("reload", (done) => {
    browserSync.reload();
    done();
});

// 定义默认任务
gulp.task("default", gulp.series(["del", "css", "js", "html", "lib", "img", "autopage"]));

文件使用中括号引入可以生成多级目录，其他都有注释就不一一说明了