大前端时代的到来，让我们对未来充满了各种幻想和憧憬，同时也带给我们了痛苦与迷茫。各种框架漫天飞，各种打包工具到处跑；
牛逼哄哄的大神们，一言不合就开始自己打造神器。我觉得你的框架怎么怎么不好，我觉得你这里封装的怎么怎么稀烂，于是乎，五环之外回龙观中，闭关修炼九九八十一天.......
像我们这样的搬砖小民工，尚浅的道行还不足以打造神器，那我们就一起静下心来好好钻研一下别人的神器，不会造还不会用吗！！！
现在都崇尚前端自动化，那就要知道前端构建工具——实现前端代码的编译（sass、less）、压缩、测试；图片的压缩以及浏览器自动刷新等等功能。目前流行的三大前端构建工具 grunt 、 gulp 、 fis3 、、、、
哎，废话也真多！下面进入正题，运用gulp ＋ browserSync来实现前端自动化，这可是我的处女贴哦...
安装gulp就不用多说了吧！新建package.json文件，把下面配置文件拷贝进去
{
"name": "amujoe",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "joe",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.17.5",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-less": "^3.2.0",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "^2.0.0"
}
}
npm 安装依赖
npm install
安装依赖需要一段时间，这时候我们完成另一个配置文件：gulpfile.js;小哥已经把备注标注的很清楚了
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),//实时更新
less = require('gulp-less'),//less
cssmin = require('gulp-minify-css'),//压缩css
uglify = require('gulp-uglify'),// 压缩js
concat = require('gulp-concat'),//合并文件
notify = require('gulp-notify'),//处理崩溃问题
plumber = require('gulp-plumber');//报错 不中断当前任务
//less
gulp.task('less',function(){
console.log('less');
gulp.src('./src/less/*.less')
.pipe(plumber({
errorhandler:notify.onError('Error:<% error.message %>')
}))//报错
.pipe(less())//没错 就编译
.pipe(concat('main.css'))
.pipe(gulp.dest('./src/css'));//编译生成文件夹
//console.log('less');
});
gulp.task('cssmin',function(){
console.log('cssmin');
gulp.src('./src/css/*.css')
.pipe(cssmin({
advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
keepBreaks: false,//类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: '*'
//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
}))
.pipe(gulp.dest('./dist/css'));//编译生成文件夹
})
//js
gulp.task('jsmin',function(){
console.log('jsmin-a');
gulp.src('./src/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
console.log('jsmin-b');
})
//watch less
gulp.task('watch',function(){
gulp.watch('./src/less/*.less',['less']);
})
//watch css
gulp.task('watchcss',function(){
gulp.watch('./src/css/*.css',['cssmin']);
})
///watch js
gulp.task('watchjs',function(){
gulp.watch('./src/js/*.js',['jsmin']);
})
///browserSync 启动一个静态服务器
gulp.task('server',function(){
browserSync.init({
files:'**',
server:{
baseDir:'./'
}
})
})
//default 默认的任务
gulp.task('taskList',['server','watch','watchjs','watchcss']);
gulp.task('default',function(){
gulp.start('taskList');
console.log('go start');
})
我的文件目录是下面这样的；src 是开发环境，lib是共用插件，dist是生产环境
完成以上配置以后，运行gulp就可以专心搬砖了
gulp
网友评论