码迷,mamicode.com
首页 > 其他好文 > 详细

gulp 的入门小Demo

时间:2016-10-10 19:35:13      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:

首先需要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 = ‘./src/*.html‘,
       htmlDst = ‘./dist/‘;

   gulp.src(htmlSrc)
       .pipe(gulp.dest(htmlDst))
});

//css处理
gulp.task(‘css‘,function(){
   var cssSrc = ‘./src/sass/*.css‘,
       cssDst = ‘./dist/css‘;

   gulp.src(cssSrc)
       .pipe(minifycss())
       .pipe(gulp.dest(cssDst))
});

//图片处理
gulp.task(‘images‘,function(){
   var imgSrc = ‘./src/images/**/*‘,
       imgDst =  ‘./dist/images‘;

   gulp.src(imgSrc)
        .pipe(imagemin())
        .pipe(gulp.dest(imgDst));
});

//js处理
gulp.task(‘js‘,function(){
   var jsSrc = ‘./src/js/*.js‘,
       jsDst = ‘./dist/js‘;

   gulp.src(jsSrc)
       .pipe(concat(‘main.js‘))
       .pipe(rename({suffix:‘.min‘}))
       .pipe(uglify())
       .pipe(gulp.dest(jsDst))
});

//清空 图片样式js
gulp.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

标签:

原文地址:http://www.cnblogs.com/wanghongde/p/5946374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!