写一个最简单的gulp 实例

Posted 2020-09-19

今天写了一个简单的gulp 实例 分享给大家！ 比较适合gulp 初学者

首选： 看看gulp官网了解一些基本的定义

　　　官网地址 ： http://www.gulpjs.com.cn/

搭建node环境 安装 gulp  自行百度吧！

文件目录

dist : 打包后文件所在目录

src ： 源文件目录

glpfile.js ： gulp的配置文件

package.json ： 配置文件

安装依赖 ：

"devDependencies": {
  "colors": "^1.0.3",
  "gulp": "^3.8.11",
  "gulp-autoprefixer": "^2.1.0",
  "gulp-imagemin": "^2.2.1",
  "gulp-less": "^3.0.2",
  "gulp-minify-css": "^1.0.0",
  "gulp-ruby-sass": "^1.0.1",
  "gulp-sourcemaps": "^1.5.1",
  "gulp-uglify": "^1.1.0",
  "gulp-watch-path": "^0.0.7",
  "stream-combiner2": "^1.0.2"
},

准备工作做好以后 开始编写 gulpfile.js 文件

 

  一： 引入你所需要的依赖

var gulp=require("gulp");
var minifyCSS = require(‘gulp-minify-css‘)
var uglify = require(‘gulp-uglify‘)
var rename = require("gulp-rename");
var minimist = require("minimist");
var fileinclude = require("gulp-file-include");

二 ： 配置相关路径
　

var basePath = "./src";  //源文件目录
var releasePath = "./dist";  //资源发布目录

var paths = {

    html : [
        "./src/*.html"
    ],
    indexJs : [
        "./src/js/index.js"
    ],
    indexCss : [
        "./src/css/index.css"
    ]
}

三 ： 建立 html 任务

gulp.task("html", function () {
　　// 入口文件路径
    gulp.src(paths.html)

　　// 功能函数
    .pipe(fileinclude({
        prefix: "@@",
        basePath: "@file"
    }))
　　　　　// 输出文件路径
        .pipe(gulp.dest(releasePath + "/"))
});

四 ： 建立css 任务

gulp.task("indexCss", function () {
    // js 路径
    gulp.src(paths.indexCss)
        .pipe(rename("index.css"))
　　　　　// 压缩 css 
        .pipe(minifyCSS())
        // 输出路径
        .pipe(gulp.dest(releasePath + "/css"))
});

五 ： 建立 js 任务

gulp.task("indexJs", function () {
    // js 路径
    gulp.src(paths.indexJs)
        .pipe(rename("index.js"))
　　　　　// 压缩 js 
        .pipe(uglify())
        .pipe(gulp.dest(releasePath + "/js"))
});

最后 ：调用任务

gulp.task("default",[‘html‘]);