前端环境

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

2017-03-26  本文已影响0人  路人不分甲乙丙

写作初衷

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

前期工具准备:

使用angular-quickstart

开始安装gulp和bower

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

结语

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

上一篇 下一篇

猜你喜欢

热点阅读