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

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

典型场景如下:
我每天开始工作时,只要打开工作目录,在黑色的命令窗内运行"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 | 查看次数: 1299
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭