配置个顺手的的gulpfile.js文件

Baoyuan 发布于2019-08-19 17:15 / 1273人阅读

摘要：前期用的是，看了一下。觉得语法比简单，根据需求配置了一下基本满足了自己的需求。服务器编译编译出错啦凸，快去命令行查看编译出错拼接默认任务

前期用的是grunt，看了一下gulp。觉得语法比grunt简单，根据需求配置了一下基本满足了自己的需求。

var gulp=require("gulp"),
    less=require("gulp-less"),
    plumber=require("gulp-plumber"),
    prefix=require("gulp-autoprefixer"),
    notify=require("gulp-notify"),
    sftp=require("gulp-sftp"),
    concat=require("gulp-concat"),
    minifyCSS=require("gulp-minify-css"),
    browserSync=require("browser-sync");

var config={
    src:"./src/"
}

var src=config.src+"js/";

/* 服务器 */
gulp.task("serve",["less","js-concat"],function(){
    browserSync.init({
        server: {
            baseDir: "./",
            directory: true
        }
    });

    gulp.watch("src/less/**/*.less", ["less"]);

    gulp.watch(["*.html","src/js/**/*.js"]).on("change",function(){
      browserSync.reload();
      gulp.run("js-concat");
    });

});

/* less编译 */
gulp.task("less",function(){
    gulp.src("./src/less/style.less")
        .pipe(plumber())
        .pipe(less({
      paths: ["./src/less"]
    }))
        .on("error",notify.onError(function (error) {
            browserSync.notify("less编译出错啦（︶︿︶）=凸 ，快去命令行查看！！！",10000000);
               return {
                   message: "Error: <%= error.message %>",
                title: "less编译出错"
             };
          }))
        .pipe(prefix(["last 15 versions", "> 1%", "ie 8", "ie 7"], { cascade: true }))
    .pipe(minifyCSS())
        .pipe(gulp.dest("css"))
        .pipe(browserSync.reload({stream:true}));
});

/* js拼接 */
gulp.task("js-concat",function(){
  return gulp.src([src+"base/*.js",src+"plugin/*.js",src+"common/*.js",src+"module/*.js",])
             .pipe(concat("bundle.js"))
             .pipe(gulp.dest("./js/"));
})

/* 默认任务 */

gulp.task("default",["serve"])

云服务器专线服务不顺手人个搭建云服务器配置服务器配置2个ip 几个阿里云服务器文件共享

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78337.html

前端基础工作流：sass自动化编辑成css

摘要：目前提供了观察文件变化，自动将文件编译成的功能。但在有些机子上跟踪编译非常慢。如果想更顺手的完成更复杂的编译，就需要使用工具进行处理。启动提示打开编辑器编辑下文件，保存，查看下文件，已经编译好了。目前sass提供了观察文件变化，自动将sass文件编译成css的功能。但在有些机子上跟踪编译非常慢。使用不便。如果想更顺手的完成更复杂的编译，就需要使用nodejs,gulp 工具进行处理。...

W4n9Hu1 2019-08-30 12:59 评论0 收藏0
Gulp.js：比 Grunt 更简单的自动化的项目构建利器

摘要：是一款基于任务的设计模式的自动化工具，能给你的开发效率来一次飞跃。示例配置实现完整的自动编译并刷新网页官方网站使用文档插件列表 Gulp 是一款基于任务的设计模式的自动化工具，能给你的开发效率来一次飞跃。在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化，自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试、检查、合并...

Lsnsh 2019-08-21 12:07 评论0 收藏0
使用 Gulp 自动化构建工具快速搭建项目

摘要：通过本文，我们将学习如何使用来改变开发流程，从而使开发更加快速高效。中文网站详细入门教程使用是基于的，需要要安装为了确保依赖环境正确，我们先执行几个简单的命令检查。详尽使用参见官方文档，中文文档项目地址为了UED前端团队更好的协作开发同时提高项目编码质量，我们需要将Web前端使用工程化方式构建；目前需要一些简单的功能： 1. 压缩HTML 2. 检查JS 3. 编译SA...

glumes 2019-08-20 15:57 评论0 收藏0
gulp和webpack入门介绍

摘要：介绍说明的包管理器，用于插件管理包括安装卸载管理依赖等使用安装插件命令提示符执行插件名称。总结安装新建文件全局和本地安装安装插件新建文件通过命令提示符运行任务。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言众所周知目前比较火的工具就是gulp和webpack，但webpack和gulp却有所不同，本...

hsluoyz 2019-08-20 18:58 评论0 收藏0
重读 Gulp

摘要：当接收一个回调函数的时候，一定要注意回调函数中的参数。主要作用就是用来读取文件或者文件夹中的数据。表示文件的名称指的是发生的变化使用技巧的进一步使用，可以参照中文官网中的技巧集。 Gulp 简介 Gulp 对现在的前端而言，是一个稍微老旧的工具了，但是，为了复习以前学过的内容，还是把它翻出来，放在自己的博客中。说不定哪天又用到了呢。需要说明的是，这里使用的 Gulp 版本是 3.9....

vpants 2019-08-22 11:19 评论0 收藏0