gulp的使用(二)之gulpfile.js文件的配置

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.css
13 
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']);