gulp 配置

gulp 安裝

1. 全局安裝 gulp：

$ npm install --global gulp

 

2. 做爲項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp

 

三、在項目根目錄下建立一個名爲 gulpfile.js 的文件和package.json：

$ npm install --save-dev   //安裝package.json裏全部插件

package.json的配置插件能夠在下面網址找到：

https://www.npmjs.com/package/gulp-csso 

這裏引用了自動刷新而且在多個瀏覽設備同時響應插件browsersync

http://www.browsersync.cn/ 

 

 gulpfile.js 文件 

// 引入 gulp及組件
var gulp    = require('gulp'),                 //基礎庫
    imagemin = require('gulp-imagemin'),       //圖片壓縮
    browserSync = require('browser-sync');//自動刷新而且多個設備同步更新
    sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css壓縮
    jshint = require('gulp-jshint'),           //js檢查
    uglify  = require('gulp-uglify'),          //js壓縮
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合併文件
    clean = require('gulp-clean'),             //清空文件夾
    tinylr = require('tiny-lr'),               //本地Web 服務器
    server = tinylr(),
    livereload = require('gulp-livereload');   //網頁自動刷新
     reload=browserSync.reload;

//加載package.json文件裏的devDependencies中的全部插件
var plugins = require('gulp-load-plugins')();

// HTML處理
gulp.task('html', function() {
        gulp.src(["html/h5/**/*.html","html/pc/**/*.html"])
        .pipe(livereload(server))
        .pipe(gulp.dest("dest"))
});
//圖片處理
gulp.task('images', function(){
    gulp.src(['html/h5/**/images/*','html/pc/**/images/*'])
        //.pipe(imagemin())
        .pipe(livereload(server))
        .pipe(gulp.dest("dest"));
})
//壓縮js    
gulp.task('minifyjs', function() {
    return gulp.src(['html/h5/**/js/*.js','html/pc/**/js/*.js'])
        .pipe(uglify())    //壓縮
        .pipe(livereload(server))//網頁自動刷新
        .pipe(gulp.dest('dest'));  //輸出
});
//壓縮css
gulp.task('minifycss', function() {
    return gulp.src(['html/h5/**/css/*.css','html/pc/**/css/*.css']) //壓縮的文件
        //.pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())//執行壓縮
        .pipe(livereload(server))//網頁自動刷新
        .pipe(gulp.dest('dest'))//輸出文件夾
        
});
// 清空圖片、樣式、js
gulp.task('clean', function() {
    gulp.src(['dest/css/', 'dest/js/', 'dest/images/','dest/*.html','dest/*/'], {read: false})
        .pipe(clean());
});

// 代理
gulp.task('browser-sync', function() {
    browserSync.init({
        proxy: "10.2.31.189:8080"//當前ip
    });
});

// 靜態服務器
gulp.task('ls-browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./html"
        }
    });
});

// 監聽css和html文件, 當文件發生變化後作些什麼！
gulp.task('serve', function () {
    // 從這個項目的根目錄啓動服務器
    browserSync({
        server: {
            baseDir: "./html"
        }
    });
    gulp.watch("html/**/**/**/*.css").on("change", browserSync.reload);//監控css有沒有更改
    gulp.watch("html/**/**/*.html").on("change", browserSync.reload);//監控html有沒有更改
});