Gulpfile.js是什么文件:
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
而gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件.
步骤1: 在命令行中安装gulp插件(前提是安装了gulp: npm install gulp -g)
可以同时下载多个插件:
cnpm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev
说明1: 因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，所以建议使用cnpm。
说明2: 项目依赖分两种，
--save:一个就是普通的项目依赖比如bootstrap，还用一种只是开发阶段需要用的，
--save-dev这种属于开发依赖比如gulp，开发依赖最终记录在devDependencies节点里面
说明3: 一些常用的gulp插件:
1. gulp-less: 把less文件转成css文件
2.gulp-clean-css：css文件压缩。
3.gulp-uglify：js压缩
4.gulp-concat：js合并
5.gulp-rename：重命名，给js压缩文件添加.min后缀
6.gulp-jshint：js语法检查
步骤2: 在项目文件夹下面创建一个名叫gulpfile.js的文件夹,在上面的插件下载完毕后,就可以配置相关代码的管理功能了:
步骤3: 开始打开gulpfile.js文件写代码配置(以gulp-less插件为例子):
1 var gulp = require(‘gulp‘),//载入gulp模块 2 ?3 ????less = require(‘gulp-less‘)；//载入需要用到的插件 4 //定义一个testLess任务（自定义任务名称） 5 ?6 gulp.task(‘testLess‘, function () { 7 ?8 ????gulp.src(‘less/*.less‘) ??????//该任务针对的文件 9 10 ????????.pipe(less()) ????????????//该任务调用的模块11 12 ????????.pipe(gulp.dest(‘css‘)); ?//将会在css下生成index.css13 14 });15 16 //监听less文件17 18 gulp.task(‘gulpWatch‘,function(){19 gulp.watch(‘less/*.less‘,[‘testLess‘]);20 });21 //同时让默认程序执行一次，可以提高开始执行速度。22 23 gulp.task(‘default‘,[‘testLess‘,‘gulpWatch‘]);最后在你的当前项目命令行中输入gulp执行即可。你会看到在相关的路径下生成对应的css文件。
但是,一般我们在公司,都不需要自己去配置这样一个文件,因为每次开发项目的时候都可以使用公司已经配置好的gulpfile.js文件,
把下面的代码拷贝到自己创建的gulpfile.js文件中即可使用:
代码如下:
var app = { ?// 定义目录 ???srcPath:‘src/‘, ???buildPath:‘build/‘, ???distPath:‘dist/‘}/*1.引入gulp与gulp插件 ??使用时，要去下载这些插件*/var gulp = require(‘gulp‘);var less = require(‘gulp-less‘);var cssmin = require(‘gulp-cssmin‘);var uglify = require(‘gulp-uglify‘);var concat = require(‘gulp-concat‘);var connect = require(‘gulp-connect‘);var imagemin = require(‘gulp-imagemin‘);var open = require(‘open‘);/*把bower下载的前端框架放到我们项目当中*/gulp.task(‘lib‘,function () { ???gulp.src(‘bower_components/**/*.js‘) ???????.pipe(gulp.dest(app.buildPath+‘lib‘)) ???????.pipe(gulp.dest(app.distPath+‘lib‘)) ???????.pipe(connect.reload()) //当内容发生改变时， 重新加载。});/*2.定义任务 把所有html文件移动另一个位置*/gulp.task(‘html‘,function () { ???/*要操作哪些文件 确定源文件地址*/ ???gulp.src(app.srcPath+‘**/*.html‘) ?/*src下所有目录下的所有.html文件*/ ???????.pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置 ???????.pipe(gulp.dest(app.distPath)) ???????.pipe(connect.reload()) //当内容发生改变时， 重新加载。});/*3.执行任务 通过命令行。gulp 任务名称*//*定义编译less任务 ?下载对应的插件 gulp-less * 把less文件转成css放到build * */gulp.task(‘less‘,function () { ???gulp.src(app.srcPath+‘style/index.less‘) ???????.pipe(less()) ???????.pipe(gulp.dest(app.buildPath+‘css/‘)) ???????/*经过压缩，放到dist目录当中*/ ???????.pipe(cssmin()) ???????.pipe(gulp.dest(app.distPath+‘css/‘)) ???????.pipe(connect.reload())});/*合并js*/gulp.task(‘js‘,function () { ???gulp.src(app.srcPath+‘js/**/*.js‘) ???????.pipe(concat(‘index.js‘)) ???????.pipe(gulp.dest(app.buildPath+‘js/‘)) ???????.pipe(uglify()) ???????.pipe(gulp.dest(app.distPath+‘js‘)) ???????.pipe(connect.reload())});/*压缩图片*/gulp.task(‘image‘,function () { ???gulp.src(app.srcPath+‘images/**/*‘) ???????.pipe(gulp.dest(app.buildPath+‘images‘)) ???????.pipe(imagemin()) ???????.pipe(gulp.dest(app.distPath+‘images‘)) ???????.pipe(connect.reload())});/*同时执行多个任务 [其它任务的名称] * 当前bulid时，会自动把数组当中的所有任务给执行了。 * */gulp.task(‘build‘,[‘less‘,‘html‘,‘js‘,‘image‘,‘lib‘]);/*定义server任务 * 搭建一个服务器。设置运行的构建目录 * */gulp.task(‘server‘,[‘build‘],function () { ???/*设置服务器*/ ???connect.server({ ???????root:[app.buildPath],//要运行哪个目录 ???????livereload:true, ?//是否热更新。 ???????port:9999 ?//端口号 ???}) ???/*监听哪些任务*/ ???gulp.watch(‘bower_components/**/*‘,[‘lib‘]); ???gulp.watch(app.srcPath+‘**/*.html‘,[‘html‘]); ???gulp.watch(app.srcPath+‘js/**/*.js‘,[‘js‘]); ???gulp.watch(app.srcPath+‘images/**/*‘,[‘image‘]); ???gulp.watch(app.srcPath+‘style/**/*.less‘,[‘less‘]); ???//通过浏览器把指定的地址 （http://localhost:9999）打开。 ???open(‘http://localhost:9999‘);});/*定义默认任务 * 直接执行gulp 会调用的任务 * */gulp.task(‘default‘,[‘server‘]);gulp的使用(二)之gulpfile.js文件的配置
原文地址：http://www.cnblogs.com/hollyZ/p/7705618.html