亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

angular1配合gulp和bower使用

JasonZhang / 2082人閱讀

摘要：需要在每次發(fā)布前刪除和目錄總?cè)蝿?wù)服務(wù)啟動一個(gè)服務(wù)器服務(wù)器從哪個(gè)路徑開始讀取，默認(rèn)從開發(fā)路徑讀取自動刷新打開瀏覽器監(jiān)聽定義任務(wù)

一 安裝gulp和bower

gulp安裝: npm install -g gulp

bower安裝: npm install -g bower

==注：== angularjs的一些包文件我們是通過bower來管理的

二 bower使用

使用bower初始化一個(gè)項(xiàng)目: bower init

填寫工程名，描述等等那些東西

安裝angularjs：bower install --save angular

創(chuàng)建.bowerrc文件（注意window最好用命令行創(chuàng)建）

三 自動化工具gulp的使用

初始化文件：npm init(一直回車下去就可以)

在項(xiàng)目里面安裝gulp：npm i --save-dev gulp

安裝gulp的依賴插件（只介紹項(xiàng)目中用到的）gulp-clean，gulp-concat，gulp-connect，gulp-cssmin，gulp-imagemin，gulp-less，gulp-load-plugins，gulp-uglify,open（可以和上面安裝gulp一樣安裝）

創(chuàng)建gulpfile.js來編寫gulp的配置

// 依賴
var gulp = require("gulp");
// 進(jìn)行實(shí)例化(gulp-load-plugins這個(gè)模塊后面可以通過$來操作)
var $ = require("gulp-load-plugins")();

// open模塊
var open = require("open");

var app = {
    srcPath: "src/",   //源代碼路徑
    devPath: "build/",  //整合后的路徑，開發(fā)路徑
    prdPath: "dist/"  //生產(chǎn)環(huán)境路徑
};

// 創(chuàng)建任務(wù)
gulp.task("lib", function () {
    gulp.src("bower_components/**/*.js")
    .pipe(gulp.dest(app.devPath + "vendor"))
    .pipe(gulp.dest(app.prdPath + "vendor"))
    .pipe($.connect.reload());
});

/*
*  html任務(wù)
*  創(chuàng)建目錄src，在src下創(chuàng)建index.html
*  創(chuàng)建視圖模版目錄view，在其中存放視圖view的模版
*/
gulp.task("html", function () {
    gulp.src(app.srcPath + "**/*.html")
    .pipe(gulp.dest(app.devPath))
    .pipe(gulp.dest(app.prdPath))
    .pipe($.connect.reload());
});

/*
*  json任務(wù)
*/
gulp.task("json", function () {
    gulp.src(app.srcPath + "data/**/*.json")
    .pipe(gulp.dest(app.devPath + "data"))
    .pipe(gulp.dest(app.prdPath + "data"))
    .pipe($.connect.reload());
});

/*
*  css任務(wù)
*  在src下創(chuàng)建style文件夾，里面存放less文件。 
*/
gulp.task("less",function () {
    gulp.src(app.srcPath + "style/index.less")
    .pipe($.less())
    .pipe(gulp.dest(app.devPath + "css"))
    .pipe($.cssmin())
    .pipe(gulp.dest(app.prdPath + "css"))
    .pipe($.connect.reload());
});


/*
*  js任務(wù)
*  在src目錄下創(chuàng)建script文件夾，里面存放所有的js文件
*/
gulp.task("js", function () {
   gulp.src(app.srcPath + "script/**/*.js")
   .pipe($.concat("index.js"))
   .pipe(gulp.dest(app.devPath + "js"))
   .pipe($.uglify())
   .pipe(gulp.dest(app.prdPath + "js"))
    .pipe($.connect.reload());
});


/*
*  image任務(wù)
* 
*/
gulp.task("image", function () {
    gulp.src(app.srcPath + "image/**/*")
    .pipe(gulp.dest(app.devPath + "image"))
    .pipe($.imagemin())  // 壓縮圖片
    .pipe(gulp.dest(app.prdPath + "image"))
    .pipe($.connect.reload());
});

// 每次發(fā)布的時(shí)候，可能需要把之前目錄內(nèi)的內(nèi)容清除，避免舊的文件對新的容有所影響。 需要在每次發(fā)布前刪除dist和build目錄
gulp.task("clean", function () {
    gulp.src([app.devPath, app.prdPath])
    .pipe($.clean());
});

// 總?cè)蝿?wù)
gulp.task("build", ["image", "js", "less", "lib", "html", "json"]);

// 服務(wù)
gulp.task("serve", ["build"], function () {
    $.connect.server({   //啟動一個(gè)服務(wù)器
        root: [app.devPath], // 服務(wù)器從哪個(gè)路徑開始讀取，默認(rèn)從開發(fā)路徑讀取
        livereload: true,  // 自動刷新
        port: 1234
    });
    
    // 打開瀏覽器
    open("http://localhost:1234");
    
    // 監(jiān)聽
    gulp.watch("bower_components/**/*", ["lib"]);
    gulp.watch(app.srcPath + "**/*.html", ["html"]);
    gulp.watch(app.srcPath + "data/**/*.json", ["json"]);
    gulp.watch(app.srcPath + "style/**/*.less", ["less"]);
    gulp.watch(app.srcPath + "script/**/*.js", ["js"]);
    gulp.watch(app.srcPath + "image/**/*", ["image"]);
});

// 定義default任務(wù)
gulp.task("default", ["serve"]);

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/92590.html

相關(guān)文章

  • angular 1.x多項(xiàng)目共享子項(xiàng)目實(shí)踐之路

    摘要：可發(fā)布這一部分會在下一章管理對子項(xiàng)目引用中詳細(xì)說明。總結(jié)本文總結(jié)了多項(xiàng)目共享子項(xiàng)目工程化方面的一些實(shí)踐，并不涉及到復(fù)雜的代碼，主要涉及到的概念，使用進(jìn)行包管理，使用作為自動化工具等工程化的知識。 背景 公司的產(chǎn)品線涵蓋多個(gè)產(chǎn)品，這些產(chǎn)品中會有一些相同的功能，如登錄，認(rèn)證等，為了保持這些功能在各個(gè)產(chǎn)品中的一致性，我們在各個(gè)產(chǎn)品中維護(hù)一份相同的代碼。這帶來了很大的不便：當(dāng)出現(xiàn)新的需求時(shí)，不...

    mist14 評論0 收藏0

  • Webpack + Angular的組件化實(shí)踐

    摘要：最近寫復(fù)旦二手平臺的時(shí)候開始嘗試用一直推崇了很久的組件化。經(jīng)過一番抉擇之后選擇了的組合。所以在這里分享一下具體的實(shí)踐流程。自己有自己獨(dú)特的依賴注入以及模塊聲明方式，看起來似乎和是水火不容的，但事實(shí)上他們完全可以融合。 最近寫復(fù)旦二手平臺的時(shí)候開始嘗試用一直推崇了很久的組件化。經(jīng)過一番抉擇之后選擇了 webpack + angular 的組合。所以在這里分享一下具體的實(shí)踐流程。 Web...

    neuSnail 評論0 收藏0

  • 使用gulp+bower構(gòu)建Angular.js項(xiàng)目

    摘要：本文重點(diǎn)是詳細(xì)介紹項(xiàng)目的構(gòu)建。是優(yōu)秀的自動化項(xiàng)目構(gòu)建工具，我們將用它完成等文件的的測試檢查合并壓縮格式化瀏覽器自動刷新部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟熱重載。是項(xiàng)目依賴管理工具。環(huán)境需求運(yùn)行在環(huán)境，首先安裝。 本文重點(diǎn)是詳細(xì)介紹Angular.js項(xiàng)目的構(gòu)建。gulp是優(yōu)秀的自動化項(xiàng)目構(gòu)建工具，我們將用它完成 javascript/less/css/html/imag...

    roland_reed 評論0 收藏0

  • 前端webpack workflow（二）——Webpack基本使用

    摘要：還可以用作文件加載使用，詳細(xì)請看。實(shí)用命令除了簡單運(yùn)行，還可以添加幾個(gè)參數(shù)，方便部署文件處理。以上僅僅介紹了前端開發(fā)最基本的用法，更多參數(shù)以及功能使用，參考官網(wǎng) 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉(zhuǎn)載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    roadtogeek 評論0 收藏0

  • 前端webpack workflow（二）——Webpack基本使用

    摘要：還可以用作文件加載使用，詳細(xì)請看。實(shí)用命令除了簡單運(yùn)行，還可以添加幾個(gè)參數(shù)，方便部署文件處理。以上僅僅介紹了前端開發(fā)最基本的用法，更多參數(shù)以及功能使用，參考官網(wǎng) 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉(zhuǎn)載請注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...

    LeexMuller 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<