美文网首页
gulp基础插件以及基本配置

gulp基础插件以及基本配置

作者: 萤火虫de梦 | 来源:发表于2019-05-08 15:48 被阅读0次
    var gulp = require('gulp');
    var borwserSycn = require('browser-sync').create();
    var reload = borwserSycn.reload;
    var sourcemaps  = require('gulp-sourcemaps');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var cleanCss = require('gulp-clean-css');
    
    
    
    /*自动刷新*/
    gulp.task("service",function(done){
        
        borwserSycn.init({
            server:{
                baseDir:'./src/',
                index:"app.html"
            },
            port:8000,
            host: "192.168.1.36",
            notify:false,
        });
        done();
    });
    
    
    /*导入公共文件*/
    // gulp.task("public",function(){
    //  return gulp.src(["src/public/**","!src/public/sass/**"])
    //   .pipe(gulp.dest("build/public/"));
    // });
    
    /*html任务*/
    // gulp.task("html",function(){
    //  return gulp.src(["src/**/*.html","!src/public/**"])
    //  .pipe(gulp.dest("build/"));
    // });
    /*任务监听*/
    gulp.task('watchs',function(){
        gulp.watch('src/public/sass/*.scss',gulp.series('sass',"cleanCss"))
    .on('change',reload);
        //gulp.watch(['src/**/*.html','!src/public/**'],gulp.parallel("html",'public'))
        //  .on('change',reload);
    
        gulp.watch(['src/**/*.html','!src/public/**']).on('change',reload);
       
    });
    /*压缩css*/
    gulp.task("cleanCss",function(){
        gulp.src('src/public/css/**')
        .pipe(cleanCss())
        .pipe(gulp.dest('build/public/css/'));
    });
    
    /*sass任务*/
    gulp.task("sass",function(){
        console.log("sass编译成功");
        return   gulp.src('src/public/sass/*.scss')
                .pipe(autoprefixer({
                    browsers: [
                        'last 2 versions',
                        'last 1 Chrome versions',
                        'last 2 Explorer versions',
                        'last 3 Safari versions',
                        'Firefox >= 20',
                        '> 5%',
                        'Firefox ESR'
                        ],
                    remove:false
                }))
                .pipe(sass().on('error', sass.logError))
                .pipe(sourcemaps.init())
                .pipe(sourcemaps.write('./maps'))
                .pipe(gulp.dest('src/public/css/'));
    });
    
    
    /*启动*/
    gulp.task("default",gulp.series("service",gulp.parallel("watchs")));
    
    

    相关文章

      网友评论

          本文标题:gulp基础插件以及基本配置

          本文链接:https://www.haomeiwen.com/subject/pffvoqtx.html