gulp 配置

gulp 安装

1. 全局安装 gulp：

$ npm install --global gulp

 

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

 

3、在项目根目录下创建一个名为 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有没有更改
});