首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。