首页 > 代码库 > gulp 的入门小Demo

gulp 的入门小Demo

首先需要npm安装所需的模块,我的小demo安装了以下模块

技术分享

整个项目结构如下

技术分享

 

接下来上代码

var gulp = require(‘gulp‘),    imagemin = require(‘gulp-imagemin‘),    minifycss = require(‘gulp-minify-css‘),    uglify = require(‘gulp-uglify‘),    rename = require(‘gulp-rename‘),    concat = require(‘gulp-concat‘),    clean = require(‘gulp-clean‘),    livereload = require(‘gulp-livereload‘);//html处理gulp.task(‘html‘,function(){   var htmlSrc = http://www.mamicode.com/‘./src/*.html‘,       htmlDst = ‘./dist/‘;   gulp.src(htmlSrc)       .pipe(gulp.dest(htmlDst))});//css处理gulp.task(‘css‘,function(){   var cssSrc = http://www.mamicode.com/‘./src/sass/*.css‘,       cssDst = ‘./dist/css‘;   gulp.src(cssSrc)       .pipe(minifycss())       .pipe(gulp.dest(cssDst))});//图片处理gulp.task(‘images‘,function(){   var imgSrc = http://www.mamicode.com/‘./src/images/**/*‘,       imgDst =  ‘./dist/images‘;   gulp.src(imgSrc)        .pipe(imagemin())        .pipe(gulp.dest(imgDst));});//js处理gulp.task(‘js‘,function(){   var jsSrc = http://www.mamicode.com/‘./src/js/*.js‘,       jsDst = ‘./dist/js‘;   gulp.src(jsSrc)       .pipe(concat(‘main.js‘))       .pipe(rename({suffix:‘.min‘}))       .pipe(uglify())       .pipe(gulp.dest(jsDst))});//清空 图片样式jsgulp.task(‘clean‘,function(){    gulp.src([‘./dist/css‘,‘./dist/js‘,‘./dist/images‘],{read:false})        .pipe(clean());});//默认任务gulp.task(‘default‘,[‘clean‘],function(){    gulp.start(‘html‘,‘css‘,‘images‘,‘js‘)});

执行gulp后,项目结构如下

技术分享

 

gulp 的入门小Demo