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