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

Posted 2020-10-11 人生舞台,最佳期待

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‘]);