首页 > 代码库 > 写一个最简单的gulp 实例

写一个最简单的gulp 实例

今天写了一个简单的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‘]);

 

写一个最简单的gulp 实例