配置個順手的的gulpfile.js文件

Baoyuan 發布于2019-08-19 17:15 / 1429人閱讀

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

前期用的是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"])

GPU云服務器云服務器不順手人個搭建云服務器配置服務器配置2個ip 幾個阿里云服務器文件共享

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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