研究了三天的gulp,今天做一个结束吧。
本次包含的功能有:
-
html压缩
-
图片压缩
-
css压缩
-
js检测
-
js压缩
-
文件合并
-
文件更名
-
提示信息
-
编译less
-
创建服务器-浏览器实时刷新
因为我安装的是马云爸爸提供的cnpm所以,我的cmd命令都是cnpm开始的。
cnpm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-jshint gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-notify gulp-less gulp-connect --save-dev
//初始化工具 var gulp = require('gulp'); var htmlmin = require('gulp-htmlmin'), //html压缩 imagemin = require('gulp-imagemin'),//图片压缩 pngcrush = require('imagemin-pngcrush'), minifycss = require('gulp-minify-css'),//css压缩 jshint = require('gulp-jshint'),//js检测 uglify = require('gulp-uglify'),//js压缩 concat = require('gulp-concat'),//文件合并 rename = require('gulp-rename'),//文件更名 notify = require('gulp-notify'),//提示信息 less =require('gulp-less'), //编译less connect=require('gulp-connect');//创建服务器-浏览器实时刷新
//部署各种任务 // 压缩html gulp.task('html', function() { return gulp.src('src/*.html') .pipe(htmlmin({collapseWhitespace: true})) .pipe(gulp.dest('./dest')) .pipe(notify({ message: 'html task ok' })); }); // 压缩图片 gulp.task('img', function() { return gulp.src('src/images/*') .pipe(imagemin({ progressive: true, svgoPlugins: [{removeViewBox: false}], use: [pngcrush()] })) .pipe(gulp.dest('./dest/images/')) .pipe(notify({ message: 'img task ok' })); }); // 合并、压缩、重命名css gulp.task('css', function() { return gulp.src('src/css/*.css') .pipe(concat('main.css')) .pipe(gulp.dest('dest/css')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(gulp.dest('dest/css')) .pipe(notify({ message: 'css task ok' })); }); // 检查js gulp.task('lint', function() { return gulp.src('src/js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(notify({ message: 'lint task ok' })); }); // 合并、压缩js文件 gulp.task('js', function() { return gulp.src('src/js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('dest/js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dest/js')) .pipe(notify({ message: 'js task ok' })); }); //编译less gulp.task('less',function () { return gulp.src('src/less/*.less') .pipe(less()) .pipe(gulp.dest('src/css')) .pipe(notify({message:'less task ok'})); }); //浏览器实时刷新 gulp.task('serve',function () { //创建一个服务器,端口默认是8080 connect.server({ //root:根目录 root:'dest', livereload:true }); gulp.watch('dest/**/*.*',['reload']); }); //部署动作命令-reload gulp.task('reload',function () { gulp.src('dest/**/*.*') .pipe(connect.reload()); });
//运行命令:gulp default // 默认任务 gulp.task('default',['img','css','lint','js','html','less','serve'],function(){ // gulp.run('img','css','lint','js','html','less','serve'); //gulp.run已经被废弃 // 监听html文件变化 gulp.watch('src/*.html',['html']); // Watch .css files gulp.watch('src/css/*.css',['css']); // Watch .js files gulp.watch('src/js/*.js',['lint','js']); // Watch image files gulp.watch('src/images/*', ['img']); //watch less files gulp.watch('src/less/*.less',['less']); });
cmd命令窗口可以直接执行default命令运行,如果你是用的webstorm编辑器可以直接运行哦;;