写作初衷
笔者是一名大四的本科毕业生，自学前端已经有一阵子了，期间也去公司实习，在秋招和春招的摸爬滚打中，也算尘埃落定，去了一家感觉还不错的公司，过段时间就要去实习了。由于一直忙于找工作的事情，毕业设计就迟迟没有开展起来，这不到今天才开始搭建前端环境么。现学现写，也是为了怕学过了就忘，当做备忘录来写得这篇博客。不足之处，欢迎指点补充
前期工具准备：
- 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自动更新视图
- 安装browser-sync插件
cnpm install browser - 第二步 打开
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')
});
- 然后运行
gulp sync指令
这时候你会收到类似找不到gulp-sass module的错误提示，这是因为我们上面的代码有一句var sass=require('gulp-sass')，这句代码表明我们需要用到一个名称为'gulp-sass'的插件，而我们没有装，所以有错误提示。解决方案：
cnpm install gulp-sass
如果，你在墙内，而且没有采取我上文提到的安装淘宝镜像cnpm的建议，那么很不幸，在这个地方，你可能由于网速的原因，安装不了gulp-sass，你可以在网上寻求其他的解决方案，笔者也试过，不过还是一开始就下cnpm较为方便，安装插件正常网速，效率高一些。
然后再重新运行gulp sync指令 这时候就会跳出你系统默认的浏览器直接打开你的项目，这时候你可以尝试修改你的页面内容，然后看浏览器是否成功自动刷新。
结语
到这里这次搭建前端环境的分享也结束了，这也是我初次接触前端自动化构建工具的使用，gulp还有很多自动化管理文件的工具需要去探索，不过就做毕业项目的我来说这样已经够用了，以后再不断学习吧，共勉
网友评论