利用 Gulp 处理前端工作流程

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

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

//　　全局安装

$ npm install --global gulp

//　　作为项目的开发依赖安装

$ npm install --save-dev gulp

//　　在项目的根目录下 创建 gulpfile.js

//　　然后运行 gulp 即可完成

$ gulp

 

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);
});

　　$ gulp serve　　//启动服务

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));
});

　　$ gulp out　　//执行压缩 JS

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));
});

　　$ gulp less　　//执行编译 less

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

gulp.task('sass',function(){
	return gulp.src('./style.scss')
		.pipe(sass().on('error',sass.logError))
		.pipe(gulp.dest('./css'));
});

　　$ gulp sass　　//执行编译 sass