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插件为例子):
var gulp = require('gulp'),//载入gulp模块
less = require('gulp-less')；//载入需要用到的插件
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
gulp.src('less/*.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('css')); //将会在css下生成index.css
});
//监听less文件
gulp.task('gulpWatch',function(){
gulp.watch('less/*.less',['testLess']);
});
//同时让默认程序执行一次，可以提高开始执行速度。
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']);