angular1配合gulp和bower使用

JasonZhang 发布于2019-08-22 13:54 / 2041人阅读

摘要：需要在每次发布前删除和目录总任务服务启动一个服务器服务器从哪个路径开始读取，默认从开发路径读取自动刷新打开浏览器监听定义任务

一安装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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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