这是一款基于nodejs的前端自动化构建工具--gulp，以下是使用gulp的步骤： 1.安装主程序，在需要编译的目录输入 npm install gulp //安装gulp插件 2.安装常用插件 n
这是一款基于nodejs的前端自动化构建工具--gulp，以下是使用gulp的步骤：
1.安装主程序，在需要编译的目录输入
npm install gulp //安装gulp插件2.安装常用插件
npm install del//清空目录或文件用的插件npm install gulp-concat//连接css或js的插件npm install gulp-cssmin//压缩css的插件npm install gulp-uglify//压缩js的插件3.配置gulpfile.js，如果工作目录下没有该文件，请新建gulpfile.js，以下为一个常用的参考代码
/** * @author xialei <[email protected]> */(function () { "use strict"; /** * 加载插件 * @type {exports} */ var gulp = require('gulp'); var del = require('del'); var cssmin = require('gulp-cssmin'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); /** * 清空目录的命令 */ gulp.task('clean', function () { del(['build']); }); gulp.task('css', function () { /** * 加载源代码 */ return gulp.src([ 'bower_components/bootstrap/dist/css/bootstrap.min.css', 'bower_components/font-awesome/css/font-awesome.min.css', 'css/style.css' ]) /** * 压缩css */ .pipe(cssmin()) /** * 连接压缩后的css */ .pipe(concat('style.css')) /** * 输出到目标目录 */ .pipe(gulp.dest('build/css')) }); gulp.task('js', function () { return gulp.src([ /** * 加载源代码 */ 'bower_components/angular/angular.min.js', 'bower_components/angular-sanitize/angular-sanitize.min.js', 'js/main.js']) /** * 压缩Js */ .pipe(uglify()) /** * 合并js */ .pipe(concat('main.js')) /** * 输出到目标目录 */ .pipe(gulp.dest('build/js')) }); gulp.task('img', function () { /** * 加载源文件 */ return gulp.src([ 'img/*.*' ]) /** * 输出到目标目录 */ .pipe(gulp.dest('build/img')); }); /** * 定义默认任务，此任务依赖于 clean,img,css,js，所以在执行 * 本任务时会按顺序先执行依赖任务 */ gulp.task('default', ['clean', 'img', 'css', 'js']);})();4.执行编译
gulp转载自：每天进步一点点 》使用gulp来构建你的前端自动化工作流
