前端研究 订阅所有【前端研究】的日志

搭建了适合自己的前端自动流水线(gulp+browserSync+sass)

作者:admin 日期:2016-06-26
字体大小: 小 中 大
很多前端小菜鸟们，还不知道啥是自动工作流。说白了，就是搭建一套自动机制，让前端码农变成无脑的流水线工人，摆脱琐碎的人工劳动。从此，你在开发环境做的东西，会自动的传送到生产环境。

典型场景如下：
我每天开始工作时，只要打开工作目录，在黑色的命令窗内运行"gulp"，然后我开始写html及sass代码。
1、当我按ctrl+s存盘时，sass会自动的编译成css，并拷贝到要发布的文件夹内。--gulp-sass
2、我在html文件中使用了include命令，把一些公共部分include进来，而这种语法，HTML本身是不支持的，只能依靠工具。--gulp-file-include
3、我每次存盘，chrome及手机中的页面都会自动刷新，时时看效果。不象之前，每存次盘，还要F5一下。--browserSync

4、目前我还没有使用代码压缩、混淆、合并等机制，如果需要，一分钟可以加进来。
5、甚至还可以自动上传、SVN、压缩备份等，自动得有点过了，暂时不敢用。

其实半年前我就知道了gulp+sass的功能，只是没有大用。当时项目中的妹子，来自原云厨前端团队，使用这样一套工作流：
1、sass编译，使用ruby环境+compass+sass的搭配;
2、px2rem使用sass公式实现;
3、本地虚拟站点，使用另一个node小程序，具体我不记得了。

我觉得搭建一套流，用了几套不同的东西，管理起来挺麻烦的，没怎么用。这几天，静下心来，终于用 gulp 统一了大局，从此故事主人公过上了幸福快乐的生活。

 

放一下我的gulpfile.js文件供参考：
 
Javascript代码
  1. var gulp = require('gulp'),  
  2.     concat = require('gulp-concat'),  
  3.     uglify = require('gulp-uglify'),  
  4.     browserSync = require('browser-sync').create(),  
  5.     fileinclude = require('gulp-file-include'),  
  6.     minifyCss = require('gulp-minify-css'),  
  7.     sass = require('gulp-sass');  
  8.   
  9. gulp.task('sass', function() {  
  10.     return gulp.src('src/sass/**/*.scss')  
  11.         .pipe(sass().on('error', sass.logError))  
  12.         .pipe(gulp.dest('public/css'));  
  13. });  
  14.   
  15. gulp.task('sassw', function() {  
  16.     gulp.watch('src/sass/**/*.scss', ['sass']);  
  17. });  
  18.   
  19. gulp.task('inc', function() {  
  20.     gulp.src(['./src/index.html'])  
  21.         .pipe(fileinclude({  
  22.             prefix: '@@',  
  23.             basepath: '@file'  
  24.         }))  
  25.         .pipe(gulp.dest('./public'));  
  26. });  
  27.   
  28. // 将所有css文件连接为一个文件并压缩，存到public/css  
  29. gulp.task('concatCss', function() {  
  30.     gulp.src(['src/css/*.css'])  
  31.         // .pipe(concat('main.css'))  
  32.         // .pipe(minifyCss())  
  33.         .pipe(gulp.dest('public/css'));  
  34. });  
  35.   
  36.   
  37. // 将所有js文件连接为一个文件并压缩，存到public/js  
  38. gulp.task('concatJs', function() {  
  39.     gulp.src(['src/js/*.js'])  
  40.         // .pipe(concat('main.js'))  
  41.         // .pipe(uglify())  
  42.         .pipe(gulp.dest('public/js'));  
  43. });  
  44.   
  45. // 需要时运行一下就行了。  
  46. gulp.task('copy', function() {  
  47.     console.log('拷贝！');  
  48.     gulp.src(['src/**'])  
  49.         .pipe(gulp.dest('public'));  
  50. });  
  51.   
  52.   
  53.   
  54. // 默认任务  
  55. gulp.task('default', ['watch']);  
  56.   
  57.   
  58. // 监听任务  
  59. gulp.task('watch', function() {  
  60.   
  61.     // 建立浏览器自动刷新服务器  
  62.     browserSync.init({  
  63.         server: {  
  64.             baseDir: "public",  
  65.             index: "html/love.html" //自动跳转到此页  
  66.         }  
  67.     });  
  68.   
  69.   
  70.   
  71.   
  72.     // gulp.watch('src/css/*.css', ['concatCss']);  //处理Css  
  73.     gulp.watch('src/sass/**/*.scss', ['sass']);  
  74.     // gulp.watch('src/js/*.js', ['concatJs']);  
  75.     // gulp.watch('src/**/*.html', ['inc']);      //处理包含文件  
  76.   
  77.   
  78.     // 自动刷新  
  79.     gulp.watch('public/**', function() {  
  80.         browserSync.reload();  
  81.     });  
  82.   
  83. });  
 


文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: gulp
相关日志:
评论: 0 | 引用: 0 | 查看次数: 9022
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 支持Gravatar头像.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭