成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端練習(xí)項(xiàng)目gulp配置

linkFly / 3251人閱讀

摘要：記錄下學(xué)習(xí)過程使用的一些經(jīng)驗(yàn)我的文件夾目錄是這樣的功能需求如下在任意子目錄下修改文件后自動(dòng)編譯在對(duì)應(yīng)項(xiàng)目文件夾的文件夾下在任意子目錄下修改文件后都自動(dòng)刷新瀏覽器增加了壓縮文件的需求，需要

記錄下學(xué)習(xí)過程使用gulp的一些經(jīng)驗(yàn)

我的文件夾目錄是這樣的 
|-- project
    |-- child-project
        |-- src
            |-- html
            |-- less
            |-- js
            |-- img
        |-- dist
            |-- html
            |-- css
            |-- js
            |-- img
功能需求如下 


在 project任意子目錄下修改less文件后自動(dòng)編譯在對(duì)應(yīng)項(xiàng)目文件夾的css文件夾下


在 project任意子目錄下修改html、js、less文件后都自動(dòng)刷新瀏覽器



2017-12-14



增加了壓縮文件的需求，需要將src中的js文件/img/css文件進(jìn)行壓縮，壓縮至dist文件夾下


增加了檢查js代碼
實(shí)際配置 
//編譯與刷新瀏覽器
    //導(dǎo)入工具包
var gulp = require("gulp"),
    less = require("gulp-less"),
    browserSync = require("browser-sync").create(),
    browserReload = browserSync.reload,
    rename = require("gulp-rename");

//定義less編譯任務(wù)
gulp.task("lessCompile", function() {
    gulp.src("./project/**/*.less") //該任務(wù)針對(duì)的文件
        .pipe(less())//該任務(wù)調(diào)用的模塊
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace("less", "css");
        }))
        .pipe(gulp.dest("./project"))
        .pipe(browserReload({stream: true}));
});

//監(jiān)聽 本地 less/html/js 文件
gulp.task("serve", function(){
    //監(jiān)聽本地文件
    browserSync.init({
        server: {
            baseDir: "./project",
            directory: true
        }
    });
    //監(jiān)聽less
    gulp.watch("./project/**/*.less", ["lessCompile"]);
    //監(jiān)聽html
    gulp.watch("./project/**/*.html").on("change", browserReload);
    //監(jiān)聽js
    gulp.watch("./project/**/*.js").on("change", browserReload);
    
}); 

//定義默認(rèn)任務(wù)
gulp.task("default", ["serve"]);

//代碼檢查和壓縮
gulp.task("jsHint", function() {
    gulp.src(["./project/**/*.js", "!./project/**/dist/**/*.js"])//檢查的文件，忽略dist中的js文件
        .pipe(jshint(jshintConfig))//檢查
        .pipe(jshint.reporter("default")); // 輸出檢查結(jié)果
});
//定義js壓縮任務(wù)（css與img同此，更換插件即可）
gulp.task("jsmin", function() {
    gulp.src(["./project/**/*.js", "!./project/**/dist/**/*.js"])//壓縮的文件，忽略dist中的js文件
        .pipe(uglify())//壓縮
        //.pipe(rename({suffix:".min"}))//增加min后綴
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace("src", "dist");
        }))//壓縮至dist文件夾
        .pipe(gulp.dest("./project"));
});
參考學(xué)習(xí) 
http://www.cnblogs.com/2050/p...，src與dest的路徑學(xué)習(xí)參考此文
http://www.ydcss.com/archives/18 gulp的詳細(xì)入門指南
http://blog.csdn.net/u0137205... jshint的參數(shù)的配置

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89287.html

相關(guān)文章

  • “流式”前端構(gòu)建工具——gulp.js 簡介

    摘要：流式構(gòu)建改變了底層的流程控制，大大提高了構(gòu)建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關(guān)于流式構(gòu)建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實(shí)是至關(guān)重要的。 Grunt 一直是前端領(lǐng)域構(gòu)建工具（任務(wù)運(yùn)行器或許更準(zhǔn)確一些，因?yàn)榍岸藰?gòu)建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風(fēng)頭正勁的 gulp.js 隱隱有取而代之的態(tài)勢(shì)。那么，究竟是什么使得 g...

    ShevaKuilin 評(píng)論0 收藏0

  • 做一個(gè)合格的前端，gulp資源大集合

    摘要：承接前一篇做一個(gè)合格的前端，自動(dòng)化構(gòu)建工具入門教程故而整理了如下插件資源大全。接下來我會(huì)逐一開源觀點(diǎn)網(wǎng)開發(fā)過程中的前后端技術(shù)，如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個(gè)合格的前端，gulp自動(dòng)化構(gòu)建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點(diǎn)網(wǎng)：http://www.guandn.com (觀點(diǎn)網(wǎng)是一個(gè)獵獲新奇、收獲知識(shí)、重在獨(dú)立思考...

    Baoyuan 評(píng)論0 收藏0

  • webpak最全的簡單入門

    摘要：了解什么是官方文檔是這樣介紹的點(diǎn)我了解官方文檔簡單的來說，可以看做是模塊打包機(jī)它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言，等，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。 了解webpack 什么是webpack 官方文檔是這樣介紹的：點(diǎn)我了解官方文檔 簡單的來說，WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaSc...

    FreeZinG 評(píng)論0 收藏0

  • 庫，組件，框架 - 收藏集 - 掘金

    摘要：哈哈，我理解，架構(gòu)就是骨架，如下圖所示譯年月個(gè)有趣的和庫前端掘金我們創(chuàng)辦的使命是讓你及時(shí)的了解開發(fā)中最新最酷的趨勢(shì)。 翻譯 | 上手 Webpack ? 這篇就夠了！ - 掘金譯者：小 boy （滬江前端開發(fā)工程師） 本文原創(chuàng)，轉(zhuǎn)載請(qǐng)注明作者及出處。 原文地址：https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結(jié)構(gòu) - ...

    tommego 評(píng)論0 收藏0

  • 前端開發(fā)應(yīng)屆生面試指南（含各大公司具體指南及面試真題）

    摘要：先介紹一下本人應(yīng)屆前端開發(fā)一枚，非科班出身，專業(yè)是化學(xué)，大學(xué)期間開始自學(xué)前端開發(fā)，在今年春招實(shí)習(xí)和秋招的時(shí)候投了一些公司，拿到一些京東拼多多虎牙等，總體來說還算滿意，特地寫一篇文章來總結(jié)一下面試的那些套路。 showImg(https://segmentfault.com/img/remote/1460000011897700); 先介紹一下本人應(yīng)屆前端開發(fā)一枚，非科班出身，專業(yè)是化學(xué)...

    sunnyxd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<