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)

一、cdm進入項目根目錄 npm init（生成一個package.json，保存當前項目的依賴）
二、安裝相關插件到項目目錄內  npm install gulp gulp-concat gulp-minify-css gulp-uglify gulp-imagemin gulp-livereload --save-dev
三、將配置文件gulpfile.js內路徑配置好

四、gulp便可壓縮css、js、images。

 

Gulp熱更新教程：
一、在項目目錄內安裝gulp-livereload插件
二、安裝chrome插件：Enable LiveReload
三、全局安裝http-server服務
四、在項目根目錄下啓動gulp hot  
五、繼續在項目根目錄下啓動http-server服務
六、打開瀏覽器  輸入localhost:8080   將Enable LiveReload小圓點點成實心便可實現熱更新