快速搭建前端环境：使用angular+bower+gulp

写作初衷

笔者是一名大四的本科毕业生，自学前端已经有一阵子了，期间也去公司实习，在秋招和春招的摸爬滚打中，也算尘埃落定，去了一家感觉还不错的公司，过段时间就要去实习了。由于一直忙于找工作的事情，毕业设计就迟迟没有开展起来，这不到今天才开始搭建前端环境么。现学现写，也是为了怕学过了就忘，当做备忘录来写得这篇博客。不足之处，欢迎指点补充

前期工具准备：

• git：笔者习惯用git bush键入命令行，如果你喜欢系统自带的cmd也可以或者其他插件，这里以git为例 下载链接： git for windows 根据自己的系统选择下载的版本
• Node.js: node官网 默认安装即可；命令行检查node是否安装成功
  node -v
• npm：安装node时会带有npm，但并不是最新的可使用npm -v检测版本，执行下面这行命令可将npm更新好最新版本，同样用npm -v检测是否更新成功
  npm install npm -g
• cnpm：如果你在墙内 听君一句劝 使用淘宝镜像吧，如果是你到了墙外，自动忽略这条
  npm install cnpm -g
cnpm -v检测是否更新成功

使用angular-quickstart ：

• 这是一个已经搭建好架构的简易项目，遵循业内项目架构规范，如果你和我一样是新手，推荐使用，如果你已经有了一定的水平，可以指出我这篇文章的不足之处，毕竟，这是我第一次写博客。
• 复制项目链接，在桌面创建一个文件夹，文件名自取，打开git命令行，用git clone （项目链接） 将项目克隆下来。当然你也可以直接下载压缩包然后解压。但是作为一名合格的码农，推荐还是多使用命令行操作，这是程序员的自我修养

开始安装gulp和bower

• 不熟悉这两个工具的同学建议到gulp和bower了解一下这两个工具是干嘛用的
• cd angular-quickstart-master 进入目标文件夹
• cnpm install 安装项目需要用到的包
• cnpm install -g bower 全局安装bower
• cnpm install -g gulp 全局安装gulp
• bower install 下载需要用到的依赖库

按照以上步骤一步步执行，项目的基本架构就已经完成了，这个时候你如果是使用的webstorm编辑器，把项目拉进webstorm打开，双击根目录下的index.html右上角Chrome预览你就可以看到如下的页面

Paste_Image.png

点击左上角的链接就可以实现无需刷新整个页面的路由方式的切换，这时候你就可以开始在这个简单项目上开发你自己要开发的项目了

使用browser-sync

在实习过程中，做的项目是导师他们搭好，各种工具直接使用，从来没了解过或者自己根据需求去搭对应的工具
这里要介绍一项利用browser-sync和gulp配合实现监听文件的改变从而刷新浏览器的工具，不用手动F5，提高开发效率，只要按了Crtl+S自动更新视图

1. 安装browser-sync插件
   cnpm install browser
2. 第二步 打开angular-quickstart-master下的gulpfile.js文件 文件末尾加入以下代码段

var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// static server
gulp.task('sync', function () {
 // 要监听的目录文件  你可以设置为你自己想要监听的目录结构
    var files = [
        './view/*.html',
        './style/**/*.css',
        './js/**/*.js'
    ];//这里是你想要监听的文件目录，根据自己项目的实际情况来修改
    browserSync.init(files, {
        server: {
            baseDir: './'
        }
    })
});
// scss
gulp.task('sass', function () {
    return gulp.src('src/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('dist/css'))
});
//watch
gulp.task('watch', function () {
    gulp.watch('src/sass/*.scss', ['sass']);
});
gulp.task('default', function () {
    gulp.run('server', 'sass', 'watch')
});

3. 然后运行gulp sync指令
   这时候你会收到类似找不到gulp-sass module的错误提示，这是因为我们上面的代码有一句var sass=require('gulp-sass') ，这句代码表明我们需要用到一个名称为'gulp-sass'的插件，而我们没有装，所以有错误提示。解决方案：
   cnpm install gulp-sass
   如果，你在墙内，而且没有采取我上文提到的安装淘宝镜像cnpm的建议，那么很不幸，在这个地方，你可能由于网速的原因，安装不了gulp-sass，你可以在网上寻求其他的解决方案，笔者也试过，不过还是一开始就下cnpm较为方便，安装插件正常网速，效率高一些。
   然后再重新运行gulp sync 指令 这时候就会跳出你系统默认的浏览器直接打开你的项目，这时候你可以尝试修改你的页面内容，然后看浏览器是否成功自动刷新。

结语

到这里这次搭建前端环境的分享也结束了，这也是我初次接触前端自动化构建工具的使用，gulp还有很多自动化管理文件的工具需要去探索，不过就做毕业项目的我来说这样已经够用了，以后再不断学习吧，共勉