利用 Gulp 处理前端工作流程

最近做项目，因为每次做完后都要手动压缩CSS、JS 等文件，压缩后另存为 *.min.xxx。 Less 还要手动输入命令进行编译，调整页面也经常要手动刷新页面看效果，很麻烦，就尝试用 gulp 去处理下我的工作流程，让事情变得更加简单可靠。

首先要先确保 node、npm 已经安装到电脑里。

1、构建实时重载的服务器

var gulp = require('gulp');

var browserSync = require('browser-sync');

var reload = browserSync.reload;

gulp.task('serve',function(){

	//　　非服务器环境下
　　　　　browserSync({

		server:{

                    //    需要监控的目录

                    baseDir:'index'

		}

	});
　　　　　//　　服务器环境下
　　　　　browserSync.init({
　　　　 　　proxy:'localhost/index.php',
　　    });

	//    监视文件内容

	gulp.watch(['*.html','static/style/*.less','static/script/*.js'],{cwd:'index'},reload);

});

2、自动压缩 JavaScript文件

var rename = require('gulp-rename');

var uglify = require('gulp-uglify');

//	设置输出目录

var DEST = 'my';

gulp.task('out',function(){

	//	指定 JS 文件

	return gulp.src('index/**/**/common.js')

		//	输出 JS 文件

		.pipe(gulp.dest(DEST))

		//	压缩 JS 文件

		.pipe(uglify())

		//	重命名被压缩的 JS 文件

		.pipe(rename({extname:'.min.js'}))

		//	输出被压缩的 JS 文件

		.pipe(gulp.dest(DEST));

});

3、自动编译 .less => .css

var less = require('gulp-less');

//	设置输出目录

var DEST = 'my';

gulp.task('less',function(){

	gulp.src('index/**/**/*.less')

		.pipe(less({compress:true}))

		.pipe(gulp.dest(DEST));

});

4、自动编译 .scss => .css

gulp.task('sass',function(){

	return gulp.src('./style.scss')

		.pipe(sass().on('error',sass.logError))

		.pipe(gulp.dest('./css'));

});