配置個(gè)順手的的gulpfile.js文件

Baoyuan 發(fā)布于2019-08-19 17:15 / 1445人閱讀

摘要：前期用的是，看了一下。覺得語法比簡單，根據(jù)需求配置了一下基本滿足了自己的需求。服務(wù)器編譯編譯出錯(cuò)啦凸，快去命令行查看編譯出錯(cuò)拼接默認(rèn)任務(wù)

前期用的是grunt，看了一下gulp。覺得語法比grunt簡單，根據(jù)需求配置了一下基本滿足了自己的需求。

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/";

/* 服務(wù)器 */
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編譯出錯(cuò)啦（︶︿︶）=凸 ，快去命令行查看！！！",10000000);
               return {
                   message: "Error: <%= error.message %>",
                title: "less編譯出錯(cuò)"
             };
          }))
        .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/"));
})

/* 默認(rèn)任務(wù) */

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

云服務(wù)器 GPU云服務(wù)器不順手人個(gè)搭建云服務(wù)器配置服務(wù)器配置2個(gè)ip 幾個(gè)阿里云服務(wù)器文件共享

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/78337.html

相關(guān)文章

前端基礎(chǔ)工作流：sass自動(dòng)化編輯成css

摘要：目前提供了觀察文件變化，自動(dòng)將文件編譯成的功能。但在有些機(jī)子上跟蹤編譯非常慢。如果想更順手的完成更復(fù)雜的編譯，就需要使用工具進(jìn)行處理。啟動(dòng)提示打開編輯器編輯下文件，保存，查看下文件，已經(jīng)編譯好了。目前sass提供了觀察文件變化，自動(dòng)將sass文件編譯成css的功能。但在有些機(jī)子上跟蹤編譯非常慢。使用不便。如果想更順手的完成更復(fù)雜的編譯，就需要使用nodejs,gulp 工具進(jìn)行處理。...

W4n9Hu1 2019-08-30 12:59 評(píng)論0 收藏0
Gulp.js：比 Grunt 更簡單的自動(dòng)化的項(xiàng)目構(gòu)建利器

摘要：是一款基于任務(wù)的設(shè)計(jì)模式的自動(dòng)化工具，能給你的開發(fā)效率來一次飛躍。示例配置實(shí)現(xiàn)完整的自動(dòng)編譯并刷新網(wǎng)頁官方網(wǎng)站使用文檔插件列表 Gulp 是一款基于任務(wù)的設(shè)計(jì)模式的自動(dòng)化工具，能給你的開發(fā)效率來一次飛躍。在很多場合都會(huì)聽到前端工和 node 程師推薦 Grunt 來實(shí)現(xiàn)項(xiàng)目的自動(dòng)化，自動(dòng)化可以自動(dòng)完成 javascript/coffee/sass/less 等文件的的測試、檢查、合并...

Lsnsh 2019-08-21 12:07 評(píng)論0 收藏0
使用 Gulp 自動(dòng)化構(gòu)建工具快速搭建項(xiàng)目

摘要：通過本文，我們將學(xué)習(xí)如何使用來改變開發(fā)流程，從而使開發(fā)更加快速高效。中文網(wǎng)站詳細(xì)入門教程使用是基于的，需要要安裝為了確保依賴環(huán)境正確，我們先執(zhí)行幾個(gè)簡單的命令檢查。詳盡使用參見官方文檔，中文文檔項(xiàng)目地址為了UED前端團(tuán)隊(duì)更好的協(xié)作開發(fā)同時(shí)提高項(xiàng)目編碼質(zhì)量，我們需要將Web前端使用工程化方式構(gòu)建；目前需要一些簡單的功能： 1. 壓縮HTML 2. 檢查JS 3. 編譯SA...

glumes 2019-08-20 15:57 評(píng)論0 收藏0
gulp和webpack入門介紹

摘要：介紹說明的包管理器，用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執(zhí)行插件名稱。總結(jié)安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運(yùn)行任務(wù)。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言眾所周知目前比較火的工具就是gulp和webpack，但webpack和gulp卻有所不同，本...

hsluoyz 2019-08-20 18:58 評(píng)論0 收藏0
重讀 Gulp

摘要：當(dāng)接收一個(gè)回調(diào)函數(shù)的時(shí)候，一定要注意回調(diào)函數(shù)中的參數(shù)。主要作用就是用來讀取文件或者文件夾中的數(shù)據(jù)。表示文件的名稱指的是發(fā)生的變化使用技巧的進(jìn)一步使用，可以參照中文官網(wǎng)中的技巧集。 Gulp 簡介 Gulp 對(duì)現(xiàn)在的前端而言，是一個(gè)稍微老舊的工具了，但是，為了復(fù)習(xí)以前學(xué)過的內(nèi)容，還是把它翻出來，放在自己的博客中。說不定哪天又用到了呢。需要說明的是，這里使用的 Gulp 版本是 3.9....

vpants 2019-08-22 11:19 評(píng)論0 收藏0