gulpfile.js不断更新中...

Gulp压缩合并js/css文件，压缩图片，以及热更新教程

 

var gulp = require('gulp');
var concat = require('gulp-concat');//- 多个文件合并为一个；
var minifyCss = require('gulp-minify-css');//- 压缩CSS为一行；
var uglify = require('gulp-uglify');//压缩js
var imagemin=require('gulp-imagemin');//压缩图片
var livereload = require('gulp-livereload');//热更新
//压缩css
gulp.task('css', function() {
gulp.src(['./css/reset.css', './css/jquery.fullPage.css', './css/animation.css', './css/swiper-3.4.1.min.css', './css/main.css']) //- 需要处理的css文件，放到一个字符串数组里
.pipe(concat('main.css')) //- 合并后的文件名
.pipe(minifyCss()) //- 压缩处理成一行
.pipe(gulp.dest('./dest')); //- 输出文件本地;
});
//压缩js
gulp.task("js",function(){
// 把1.js和2.js合并压缩为main.js,输出到dest/js目录下
gulp.src(['./js/init.js', './js/jquery-3.1.1.min.js', './js/wxShare.js', './js/jquery.fullPage.js', './js/swiper-3.4.1.jquery.min.js', './js/area.js', './js/main.js'])
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('./dest'));
});
// 压缩图片
gulp.task('images', function () {
gulp.src('images/*.*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dest/images'));
});
//热更新
gulp.task('hot', function() {
livereload.listen();
// app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件
gulp.watch('./**/*.*', function(event) {
livereload.changed(event.path);
});
});
gulp.task('default', ['css' ,'js' ,'images']);

 

Gulp压缩教程：(需全局安装gulp  $ npm install gulp -g)

1、cdm进入项目根目录 npm init（生成一个package.json，保存当前项目的依赖）
2、安装相关插件到项目目录内  npm install gulp gulp-concat gulp-minify-css gulp-uglify gulp-imagemin gulp-livereload --save-dev
3、将配置文件gulpfile.js内路径配置好

4、gulp即可压缩css、js、images。

 

Gulp热更新教程：
1、在项目目录内安装gulp-livereload插件
2、安装chrome插件：Enable LiveReload
3、全局安装http-server服务
4、在项目根目录下启动gulp hot  
5、继续在项目根目录下启动http-server服务
6、打开浏览器  输入localhost:8080   将Enable LiveReload小圆点点成实心即可实现热更新