gulpfile.js 项目配置

gulpfile.js  配合 package.json使用

首先，使用确定项目使用gulp自动化工具。

1.创建项目文件夹，project1，打开此文件夹，查看是否安装了node -v

2.git bash here ,   npm init，创建package.json配置文件

3.npm install gulp --save-dev  安装gulp

4.创建gulpfile.js，gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件.

（引入一个插件，就需要npm install安装一下）

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 connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var babelJs = require('gulp-babel');
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+'**/*.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(babelJs({
            presets: ['@babel/env'],
            sourceType: "script"
        }))
        .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.src()创建一个流，用于从文件系统读取 Vinyl 对象。

gulp.dest()创建一个用于将 Vinyl 对象写入到文件系统的流。

gulp.task()在任务系统中定义任务。然后可以从命令行和 series()、parallel() 和 lastRun() api 访问该任务。

提醒: 这个API不再是推荐的模式了 

gulp.pipe()流， pipe方法传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)

gulp.parallel()将任务功能和/或组合操作组合成同时执行的较大操作。对于使用 series() 和 parallel() 进行嵌套组合的深度没有强制限制。

gulp.watch()监听 globs 并在发生更改时运行任务。任务与任务系统的其余部分被统一处理。

gulpfile.js将任务都配置好之后，package.json也会相应的变化

{
  "name": "hztwhw",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gulp default"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Doloresme/hztwhw.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Doloresme/hztwhw/issues"
  },
  "homepage": "https://github.com/Doloresme/hztwhw#readme",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-cssmin": "^0.2.0",
    "gulp-imagemin": "^6.1.0",
    "gulp-less": "^4.0.1",
    "gulp-uglify": "^3.0.2",
    "open": "^6.4.0"
  }
}

devDependencies中内容表示需要安装的一些插件。

scripts指的是运行gulp，项目运行那个任务。scripts中有dev，那么我 npm run dev，就相当于 gulp default，此时就会根据gulpfile.js中设置的任务来运行项目。

使用gulp工具创建项目大概就这样使用吧。有问题可以留言哦~

 

如果项目文件夹中有gulpfile.js 和 package.json 文件，那么只需要npm install，就会自动安装需要的一些插件和模块。