前言
继上次的前端构建工具gulp入门教程后，一直觉得还是不全，这次周末又在家里搞了搞，终于搞出来了一个实验性的东西FEG……
概述
FEG 是一个基于 gulp/gulp-plugins 的前端开发集成解决方案。FEG 定义了一系列任务，这些自动执行的任务可以把你从繁杂无聊的复制、粘贴、压缩、重命名、打包等事务中解脱出来，从而更专注于具体业务的开发实现。
特性
集成了常用任务，后期会增加CSSSprites功能：
| 功能 | 描述 |
|---|---|
| server | 本地 http 服务 |
| livereload | 浏览器自动刷新 |
| sass | 文件编译 |
| concat | 文件合并 |
| minify | 压缩文件 |
| zip | 代码打包 |
代码gulpfile.js
注意，下面安装npm包失败的话，需要换源或者！话说我用淘宝的源，有些包总是安装不了……
/*
使用原始
npm config set registry = "https://registry.npmjs.org/"
使用淘宝
npm config set registry = "https://registry.npm.taobao.org/"
npm install gulp node-sass gulp-sass gulp-autoprefixer gulp-minify-css gulp-livereload gulp-uglify gulp-webserver gulp-concat gulp-clean gulp-zip gulp-plumber opn --save-dev -dd
*/
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
livereload = require('gulp-livereload'),
uglify = require('gulp-uglify'),
webserver = require('gulp-webserver'),
concat = require('gulp-concat'),
clean = require('gulp-clean'),
zip = require('gulp-zip'),
plumber = require('gulp-plumber'),
opn = require('opn');
//配置本地Web 服务器：主机+端口
var localserver = {
host: 'localhost',
port: '8080'
}
//删除js文件
gulp.task('cleanjs', function () {
var stream = gulp.src('./js/all.js')
.pipe(clean());
return stream;
});
//合并javascript文件，合并后文件放入js下按顺序压缩gulp.src(['a.js', 'b.js', 'c.js'])
gulp.task('alljs',['cleanjs'],function(){
return gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./js'));
});
//压缩css文件
gulp.task('styles', function() {
return gulp.src('./css/main.scss')
.pipe(plumber())
.pipe(sass({outputStyle:'compact'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('./css'));
});
//文件监控
gulp.task('watch', function () {
// Watch .scss files
gulp.watch('./css/*.scss', ['styles']);
// Watch .js files
gulp.watch('./js/*.js', ['alljs']);
});
//调试监控
gulp.task('debugwatch', function () {
// Create LiveReload server
livereload.listen();
// Watch any files, reload on change
gulp.watch(['./css/*.css','./js/*.js','*.html'],function(file){
livereload.changed(file.path);
});
});
//开启本地 Web 服务器功能
gulp.task('webserver', function() {
gulp.src( './' )
.pipe(webserver({
host: localserver.host,
port: localserver.port,
livereload: false,
directoryListing: false
}));
});
//通过浏览器打开本地 Web服务器 路径
gulp.task('openbrowser', function() {
opn( 'http://' + localserver.host + ':' + localserver.port );
});
//把HTML拷贝到build下
gulp.task('buildhtml', function() {
var stream = gulp.src('./*.html')
.pipe(gulp.dest('./build'));
return stream;
});
//把CSS拷贝到build下
gulp.task('buildcss', ['styles'] , function() {
var stream = gulp.src('./css/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./build/css'));
return stream;
});
//把IMG拷贝到build下
gulp.task('buildimg', function() {
var stream = gulp.src('./img/**')
.pipe(gulp.dest('./build/img'));
return stream;
});
//把PLUGIN拷贝到build下
gulp.task('buildplugin', function() {
var stream = gulp.src('./plugin/**')
.pipe(gulp.dest('./build/plugin'));
return stream;
});
//把JS拷贝到build下
gulp.task('buildjs', ['alljs'] , function() {
var stream = gulp.src('./js/all.js')
.pipe(uglify())
.pipe(gulp.dest('./build/js'));
return stream;
});
//默认任务 gulp start
gulp.task('start', function(){
gulp.start('styles');
gulp.start('alljs');
gulp.start('watch');
gulp.start('webserver');
gulp.start('openbrowser');
});
//调试任务 gulp debug
gulp.task('debug', function(){
gulp.start('styles');
gulp.start('alljs');
gulp.start('watch');
gulp.start('debugwatch');
gulp.start('webserver');
gulp.start('openbrowser');
});
//打包 gulp build
gulp.task('build' ,['buildhtml','buildcss','buildimg','buildplugin','buildjs'] ,function(){
function checkTime(i) {
if (i < 10) {
i = "0" + i
}
return i
}
var d=new Date();
var year=d.getFullYear();
var month=checkTime(d.getMonth() + 1);
var day=checkTime(d.getDate());
var hour=checkTime(d.getHours());
var minute=checkTime(d.getMinutes());
return gulp.src('./build/**')
.pipe(zip('build-'+year+month+day+hour+minute+'.zip'))
.pipe(gulp.dest('./'));
});
文件路径
|--/build/--------打包后的代码
|--/img/----------图片存放目录
|--/js/-----------脚本存放目录
|--/css/----------样式存放目录
|--/plugin/-------插件存放目录
|--gulpfile.js
如何使用
1、进入项目目录执行 gulp start 命令。此时浏览器会自动打开，并且实时响应你的代码变化（需自行安装livereload插件）。
2、进入根目录进行开始工作。
3、打包代码自动生成到build文件夹下，根目录会生成build.zip
4、常用任务
启动
$ gulp start调试
$ gulp debug打包
$ gulp build鸣谢
FEG 用到了很多开源软件包，没有这些开源项目就没有FEG，在此对相关开源团队表示由衷的感谢！
另外，我已经把FEG放在了github和gitcafe上，这样方便安装了！欢迎Star，Fork！