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

資訊專欄INFORMATION COLUMN

angular1配合gulp和bower使用

JasonZhang / 2048人閱讀

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

一 安裝gulp和bower

gulp安裝: npm install -g gulp

bower安裝: npm install -g bower

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

二 bower使用

使用bower初始化一個項目: bower init

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

安裝angularjs：bower install --save angular

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

三 自動化工具gulp的使用

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

在項目里面安裝gulp：npm i --save-dev gulp

安裝gulp的依賴插件（只介紹項目中用到的）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)行實例化(gulp-load-plugins這個模塊后面可以通過$來操作)
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ā)布的時候，可能需要把之前目錄內(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({   //啟動一個服務(wù)器
        root: [app.devPath], // 服務(wù)器從哪個路徑開始讀取，默認(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://systransis.cn/yun/92590.html

相關(guān)文章

  • angular 1.x多項目共享子項目實踐之路

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

    mist14 評論0 收藏0

  • Webpack + Angular的組件化實踐

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

    neuSnail 評論0 收藏0

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

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

    roland_reed 評論0 收藏0

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

    摘要：還可以用作文件加載使用，詳細(xì)請看。實用命令除了簡單運行，還可以添加幾個參數(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ù)，方便部署文件處理。以上僅僅介紹了前端開發(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元查看
<