搭建angular1 gulp项目(上传到gitup)

（安装好相关的前端环境）

此项目只是test demo，已经上传到gitup中，需要可以clone下来看看，项目地址:angular-gulp

1.新建一个文件夹，名字为angular-gulp，dos命令切换到该目录，输入npm init，继续添上你需要的信息，ok之后目录中多了package.json（管理项目所依赖的npm包 ）

• npm init –yes|-y: 执行此命令，则会直接创建一个package.json，只配置了一些必填字段，并且给出默认值。其中name: 所处的文件夹名称

2.在package.json中配置项目相关信息，重要为相关依赖包，dependencies: 项目在生产环境中依赖的包，devDependencies: 项目在开发和测试环境中依赖的包，这里demo只配置一个。

3.配置好之后输入命令npm install,下载依赖包，完成会生成node_moduler并放在里面。

4.构建项目结构，层级，根据此项目中有几个项目构建结构(比如B端，C端，官网)，此项目目录结构如下：

css js文件夹下放对应的less,js文件，app下放对应的模块controller，holder发导航栏，core放公共的js，dist放app对应的模块(二级菜单)打包压缩后的文件，lib中放第三方插件。

5.加index.html，写入口0.js,core.js声明相关依赖，ui-router路由,nav.js导航栏，config.js路由配置，(实现懒加载)，api.js框架接口封装，接口调用，foundation为常用函数，其余你自己可以加上常量和本地存储的变量，弹出框，自定义组件directive和常用的第三方插件。(注意路径)

6.写gulpfile.js进行自动化压缩，打包，加版本。这里gulp一步就进行了压缩，监听变化，这里没有清除版本的hash值(clean),如果有需要你可以gulp的时候讲加版本的文件清除掉(gulp-clean),release的时候在打版本号。lib第三方的打包在js目录下的lib.min.js,app中各个模块的文件放在js/dist下的文件名+.js，core,holder放在core.min.js,然后将lib.min.js和core.min.js连接放在js目录下的all.min.js。css同理，克隆看代码即可明白(注意任务的链式链接来控制任务的先后顺序).gulp release任务增加版本号，然后更改index.html（加版本可以更改文件名或者在文件名后面加上?v=hash值，这里为后者）

7.开启服务器，输入gulp命令(会调用default命令，开启watch和端口监听)

gulp.task('browserSync', function () {
    browserSync.init({
        server: {
            baseDir: "./"
            // baseDir:"../WEB-INF/thymeleaf/web/views"
        }
    });
});

　　

8.查看打包后的文件变化，浏览器查看加载的文件。

效果如下(点击可实现路由页面跳转)：

9.上传到gitup中，新建仓库angular-gulp,然后拉代码到本地，会拉下来README.md,将你的工程项目移到你的本地仓库中，切换到当前目录，输入命令提交或者IDEA工具提交，先介绍命令提交(这里提交的时候发现把node_module中的文件也add了，然后撤销后再新建一个.gitignore然后再提交，应该大家都会，可以参考我发布第一篇文章git的使用)。

提交成功，去gitup上看已经跟新了。(以后修改提交代码可以借助IDEA或者sourcetree)

10.IDEA修改代码，提交查看是否更新(add commit push一步到位使,用IDEA需要在.gitignore中将他生成.idea的文件不提交)

10.提交成功后，git上也同步跟新了，a minute age。

-----原创文章，©版权所有，转载请注明标明出处：http://www.cnblogs.com/doinbean