angular1配合gulp和bower使用

JasonZhang 發布于2019-08-22 13:54 / 2042人閱讀

摘要：需要在每次發布前刪除和目錄總任務服務啟動一個服務器服務器從哪個路徑開始讀取，默認從開發路徑讀取自動刷新打開瀏覽器監聽定義任務

一安裝gulp和bower

gulp安裝: npm install -g gulp

bower安裝: npm install -g bower

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

二 bower使用

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

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

安裝angularjs：bower install --save angular

創建.bowerrc文件（注意window最好用命令行創建）

三自動化工具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一樣安裝）

創建gulpfile.js來編寫gulp的配置

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

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

var app = {
    srcPath: "src/",   //源代碼路徑
    devPath: "build/",  //整合后的路徑，開發路徑
    prdPath: "dist/"  //生產環境路徑
};

// 創建任務
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任務
*  創建目錄src，在src下創建index.html
*  創建視圖模版目錄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任務
*/
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任務
*  在src下創建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任務
*  在src目錄下創建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任務
* 
*/
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());
});

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

// 總任務
gulp.task("build", ["image", "js", "less", "lib", "html", "json"]);

// 服務
gulp.task("serve", ["build"], function () {
    $.connect.server({   //啟動一個服務器
        root: [app.devPath], // 服務器從哪個路徑開始讀取，默認從開發路徑讀取
        livereload: true,  // 自動刷新
        port: 1234
    });
    
    // 打開瀏覽器
    open("http://localhost:1234");
    
    // 監聽
    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任務
gulp.task("default", ["serve"]);

GPU云服務器云服務器阿里云服務器怎么和小程序配合使用 Bower gulp gulp4

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92590.html

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

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

mist14 2019-08-22 10:41 評論0 收藏0
Webpack + Angular的組件化實踐

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

neuSnail 2019-08-21 10:44 評論0 收藏0
使用gulp+bower構建Angular.js項目

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

roland_reed 2019-08-20 18:04 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

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

roadtogeek 2019-08-21 10:47 評論0 收藏0
前端webpack workflow（二）——Webpack基本使用

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

LeexMuller 2019-08-28 18:22 評論0 收藏0