资讯专栏INFORMATION COLUMN

从零开始创建 angularjs-gulp-es5 项目

hedzr / 3456人阅读

摘要:为了动态插入新加的和文件且添加的文件有一定顺序,安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线,继续创建一些。有时间会加入校验添加,添加等等。。。

源码地址:https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意,此项目为angular-gulp-seed
mkdir angular-gulp-seed
初始化工程
npm init
创建项目基本目录结构如下:
+src
    +app            // 业务模块
        -app.js    // 应用入口
        +demo   // 业务模块目录,所有子模块均遵循此目录
            - module.js      // 模块声明文件
            - controller.js  // vm层
            - index.html     // 主入口模板
            - router.js      // 模块路由文件
            - style.css      // 模块样式
        +home
    +assets            // 静态资源目录
        -images
        -css
    +common            // 公共服务
    +components    // 公共组件
    +scripts         // gulp脚本
        - gulp.build.js   // build任务
        - gulp.common.js  // dev,build公共任务
        - gulp.config.js  // 基础配置
        - gulp.dev.js     // dev任务
    index.html  // 主页面

package.json
正式开始coding gulp配置部分
1. 安装gulp
npm install  gulp -D
2. 新建gulpfile文件,安装browser-sync包,配置第一个任务
var browserSync = require("browser-sync");
gulp.task("browserSync", function () {
    browserSync({
        server: {
            baseDir: "./",
            index: "src/index.html"
        }
    });
});
gulp.task("default", ["browserSync"]);
// 执行gulp命令,浏览器启动,可以看到大致页面结构

更多browser-sync的信息:http://www.browsersync.cn/。

3. 为了动态插入新加的js和css文件,且添加的文件有一定顺序,安装gulp系列包。  
npm install gulp-watch gulp-inject gulp-order -D
4. 新建一个gulp.config.js文件,配置一些基本文件路径和顺序
module.exports = function () {

    var src = "./src/";
    var build = "./dist/";

    var config = {
        src: src,
        build: build,
        index: src + "index.html",
        css: [src + "**/*.css"],
        appJs: [src + "app/**/*.js"],
        commonJs: [src + "common/**/*.js"],
        componentJs: [src + "components/**/*.js"],
        jsOrder: [
            "**/app.js",    // 项目主入口
            "**/app.*.js",  // 主入口相应配置
            "**/module.js", // 模块声明
            "**/router.js", // 模块路由
            "**/index.js",  // 组件、resource入口
            "**/*.js"       // 其他
        ],
        cssOrder: [
            "**/app.css",       // 项目主模块
            "**/*.module.css",  // 业务子模块
            "**/*.css"          // 其他
        ]
    }
    return config;
}();
5. 使用gulp-inject动态插入css和js  

js任务编写

var config = require("./gulp.conf.js");
gulp.task("inject", function() {

    var js = gulp.src(config.js, {read: false}).pipe(order(config.jsOrder));
    var css = gulp.src(config.css, {read: false}).pipe(order(config.cssOrder));

    return gulp
        .src(config.index)
        .pipe(inject(js, {addPrefix: "../src", relative: true}))
        .pipe(inject(css, {addPrefix: "../src", relative: true}))
        .pipe(gulp.dest(config.src))
        .pipe(browserSync.reload({stream: true}));
});

页面添加inject标识





添加到default任务中

gulp.task("default", ["inject", "browserSync"]);

执行gulp命令,可看到如图页面效果,同时index.html页面内容发生变化







6. 开发过程中会不断添加新的css和js文件,为了优化开发体验,引入gulp-watch包添加watch任务,当js和css文件发生变化的时候,去执行inject任务
var watch = require("gulp-watch");
gulp.task("watch", function() {
    watch("src/**/*.js", function() {
        gulp.run("inject");
    });
    watch("src/**/*.css", function() {
        gulp.run("inject");
    });
});
gulp.task("default", ["inject", "browserSync", "watch"]);
编写业务代码
1. 安装angular相关包
npm install  angular angular-ui-router --save
2. 由于代码量过大,不贴出具体参见src/spp下面代码实现

src/index.html

src/app.js 项目主入口

src/app.router.js 项目路由配置

mock数据服务

为了前端保持独立,使用express搭建一个mock服务,然后我们就能愉快的开始开发了。

1. 首先安装依赖包:
npm install express body-parser json-server http-proxy-middleware -D
2. 创建server.js,内容如下:
var jsonServer = require("json-server");
var server = jsonServer.create();
var middlewares = jsonServer.defaults();
var bodyParser = require("body-parser");
var mockRouter = require("./mock/index");

// 添加默认的中间件 logger, static, cors and no-cache
server.use(middlewares);

// 解析 body
server.use(bodyParser.json());
server.use(bodyParser.urlencoded({
    extended: false
}));

server.use(mockRouter);

server.listen(4000, function() {
    console.log("God bless me no bug, http://localhost:4000");
});
3. mock文件夹下创建index.js,内容如下:
var fs = require("fs");
var express = require ("express");
var router = express.Router();

fs.readdirSync("mock").forEach(function(route) {
    if (route.indexOf("index") === -1) {
        require("./" + route)(router);
    }
});

module.exports = router;
4. 引入angular-resource.js,使用$resource服务
npm install angular-resource --save

在common/resource/创建一个utils,具体文件为resourceUtils,为所有请求添加统一前缀

(function() {
    angular
        .module("app.resource")
        .factory("resourceUtils", resourceUtils)
        .factory("webResource", webResource);

    resourceUtils.$inject = ["$resource"];

    function resourceUtils($resource) {
        return function(apiPrefix) {
            return function(url, params, actions) {
                return $resource(apiPrefix + url, params, actions);
            };
        };
    }

    webResource.$inject = ["resourceUtils"];
    function webResource(resourceUtils) {
        // 其中***为后端服务的统一前缀
        return resourceUtils("/***/"); 
    }

})();

关于$resource服务的使用,请参考这篇文章。https://silence717.github.io/2016/09/28/creating-crud-app-minutes-angulars-resource/

5. 在gulpfile.js中统一配置代理,并且修改browserSync任务:
// 引入http-proxy-middleware
var proxyMiddleware = require("http-proxy-middleware");

// 配置代理路径,是否为本地mock
var isLocal = true;
var target = "";

if (isLocal) {
    target = "http://localhost:4000";
} else {
    // API address
}
// browserSync任务添加代理
gulp.task("browserSync", function() {
    var middleware = proxyMiddleware(["/***/"], {target: target, changeOrigin: true});
    browserSync({
        server: {
            baseDir: "./",
            index: "src/index.html",
            middleware: middleware
        }
    });
});
6. 你可能需要添加一些公共的interceptor去处理后端返回的数据或者请求出错的统一处理。具体参见[https://docs.angularjs.org/api/ng/service/$http](https://docs.angularjs.org/api/ng/service/$http).  

至此已经可以在本地愉快的开发了。

配置gulp编译任务

开发完成以后代码需要build上线,继续创建一些task。

1. 安装相关依赖包
npm install gulp-angular-templatecache gulp-minify-css gulp-if gulp-useref gulp-uglify gulp-replace -D
2. 配置build任务,具体在scripts/gulp.build.js文件中.

3. 页面html遇到build的地方配置
 ...
 
 
 
 
 
 ...
我将gulp的任务全部独立出去管理,这样使得gulpfile.js更加清晰
var gulp = require("gulp");
var del = require("del");
var runSequence = require("run-sequence");
var config = require("./scripts/gulp.conf.js");
var buildTask = require("./scripts/gulp.build.js");
var devTask = require("./scripts/gulp.dev.js");
var commonTask = require("./scripts/gulp.common.js");

// 动态添加css和js到index.html
gulp.task("inject", function() {
    commonTask.inject();
});
// 添加监听任务
gulp.task("watch", function() {
    devTask.watch();
});
// 使用browerSync启动浏览器
gulp.task("browserSync", function() {
    devTask.browserSync();
});
// 清除dist文件
gulp.task("clean", function() {
    del(config.build);
});
// 打包组件模板
gulp.task("build:components-templates", function() {
    buildTask.componentsTemplate();
});
// 打包业务模板
gulp.task("build:app-templates", function () {
    buildTask.appTemplate();
});
// build index文件
gulp.task("build", ["build:components-templates", "build:app-templates"], function() {
    buildTask.buildIndex();
});
// 本地开发
gulp.task("default", ["inject", "browserSync", "watch"]);
// 线上环境打包
gulp.task("dist", ["clean"], function() {
    runSequence("inject", "build");
});
在package.json中配置脚本
"scripts": {
    "start": "concurrently "gulp" "node server.js""
  }

执行npm start即可本地启动项目

上线合并代码的时候执行gulp dist命令即可

拖延症晚期,终于写完了。有时间会加入eslint校验,添加md5,添加sass等等。。。需要做的还有很多,看心情吧!

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

转载请注明本文地址:https://www.ucloud.cn/yun/50213.html

相关文章

  • 从零开始创建 angularjs-gulp-es5 项目

    摘要:为了动态插入新加的和文件且添加的文件有一定顺序,安装系列包。具体参见至此已经可以在本地愉快的开发了。配置编译任务开发完成以后代码需要上线,继续创建一些。有时间会加入校验添加,添加等等。。。 源码地址:https://github.com/silence717/angular-gulp-seed 创建一个空文件夹名字任意,此项目为angular-gulp-seed mkdir angu...

    hqman 评论0 收藏0
  • Python中的列表介绍

    摘要:列表是中数据类型其中的一种关键字是。列表是一种可变序列类型我们可以追加插入删除和替换列表中的元素。 列表是python中数据类型其中的一种,关键字是list。列表(list)是一种可变序列类型,我们可以追加、插入、删除和 替换列表中的元...

    番茄西红柿 评论0 收藏2637
  • 入门教程 | 5分钟从零构建第一个 Flink 应用

    摘要:接着我们将数据流按照单词字段即号索引字段做分组,这里可以简单地使用方法,得到一个以单词为的数据流。得到的结果数据流,将每秒输出一次这秒内每个单词出现的次数。最后一件事就是将数据流打印到控制台,并开始执行最后的调用是启动实际作业所必需的。 本文转载自 Jark’s Blog ,作者伍翀(云邪),Apache Flink Committer,阿里巴巴高级开发工程师。 本文将从开发环境准备、创建 ...

    Mike617 评论0 收藏0

发表评论

0条评论

hedzr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<