gulp.js

作者: moly琴 | 来源:发表于2019-01-24 21:26 被阅读0次

    文件,可复用

    var gulp = require('gulp');
    // 3.X版本 3.9.1
    //引入第三方模块
    var less=require("gulp-less");
    var sass = require('gulp-sass');
    var path=require("path");
    var cleanCSS=require("gulp-clean-css");
    var rename=require("gulp-rename");
    var uglify=require("gulp-uglify");
    var browserSync = require('browser-sync');
    
    //配置less编译任务
    gulp.task("less",function () {
        gulp.src("assets/styles/*.less") //源目录
        .pipe(less({
            paths: [ path.join(__dirname, 'less', 'includes') ]
        }))
        .pipe(gulp.dest("dist/css")); //输出目录
    });
    
    //配置sass编译任务
    gulp.task("sass",function () {
        gulp.src("assets/styles/*.scss") //源目录
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest("dist/css")); //输出目录
    });
    
    //配置压缩css的任务
    gulp.task("minCss",function () {
        gulp.src("dist/css/*.css") //源目录
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(rename({
            suffix:".min" //重命名加min后缀
        }))
        .pipe(gulp.dest("dist/css/min")); //输出目录
    });
    
    //配置js压缩的任务
    gulp.task("uglifyJs",function () {
        gulp.src("src/*.js") //源目录
        .pipe(uglify()) //执行压缩
        .pipe(rename({
            suffix: ".min"   //执行重命名
        })) 
        .pipe(gulp.dest("dist/js")); //输出目录
    });
    
    //开启观察者watch
    gulp.task("default",function () {
        
        gulp.watch("assets/styles/*.less",["less"]); //观察less变化执行less编译任务
        // gulp.watch("assets/styles/*.scss",["sass"]); //观察sass变化执行sass编译任务
        // gulp.watch("dist/css/*.css",["minCss"]); //观察css变化执行css压缩任务
        // gulp.watch("src/*.js",["uglifyJs"]); //观察js变化执行js压缩任务
        
         //架设静态服务器
        browserSync.init({
            files:['**/*.css','**/*.html','**/*.js'],   //监听指定文件类型,自动刷新浏览器
            server:{
                baseDir:'./', // 设置服务器的根目录
                index:'index.html' // 指定默认打开的文件
            },
            port:8888 // 指定访问服务器的端口号
        });
        
        
    
    });
    

    相关文章

      网友评论

          本文标题:gulp.js

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