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 的使用

    什么是 gulp.js gulp.js - 基于流的自动化构建工具。gulp.js 的 API 简单,学习成本低;...

  • 分享一个AngularJS+gulp自动化配置

    packjson gulp.js 目录结构

  • Gulp笔记

    Gulp.js Gulp.js 是一个构建工具,与Grunt相比,Gulp更加简洁,执行效率更高。 安装Gulp ...

  • Gulp.js

    一款流式的前端构造工具,奉行直接写程序而不是配置文件。插件遵守单一责任原则,每个插件只负责处理一件事情。 官网:h...

  • Gulp.js

    当下的前端开发 ● 不再是简简单单的使用HTML+CSS+JavaScript这些简单的技术构建网页应用程序了● ...

  • gulp.js

    文件,可复用

  • Gulp 安装环境:

    Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 N...

  • gulp

    Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 N...

  • 《React精髓》实践笔记 - Chapter 1 环境

    点 构建 --- gulp.js babelify 用来解析JSX语法 vinyl-source-stream 可...

  • JS: gulp.js

    var gulp = require('gulp'), minify = require('gulp-minify...

网友评论

      本文标题:gulp.js

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