基于gulp4

1安装

首先在空项目中建立package.json

$ npm init 复制代码

安装gulp

$ npm install --global gulp    //全局安装$ npm install --save-dev gulp  //作为项目的开发依赖复制代码

安装gulp插件

$ npm install gulp-rename --save-dev //文件重命名$ npm install gulp-uglify --save-dev //js压缩$ npm install gulp-minify-css --save-dev //css压缩$ npm install gulp-concat --save-dev //文件合并$ npm install gulp-connect --save-dev //启动web服务$ npm install gulp-load-plugins  --save-dev//使用插件管理自动处理package.json中的插件 $ npm install gulp-order  --save-dev//控制处理的文件顺序复制代码

2配置gulpfile.js

在根目录新建gulpfile.js文件并写入

var gulp = require('gulp');gulp.task('default', function() {  // 将你的默认的任务代码放在这});复制代码

gulp提供的方法

1.gulp.task 创建一个任务。如上 在命令行执行 gulp default ,将会执行function中的代码。 2.gulp.src 获得需要处理的文件，多个文件以数组方式 3.gulp.dest 处理完成文件写入目录 4.gulp.series 顺序运行任务序列 5.gulp.parallel 并行运行任务序列

流处理方法

1.pipe将流传递下去进行处理

gulpfile.js完整代码

var gulp = require('gulp');//var rename = require('gulp-rename');//重命名//var uglify=require('gulp-uglify');//js压缩//var minifyCss = require("gulp-minify-css");//压缩CSS//var jshint = require("gulp-jshint");//js检查//var concat = require("gulp-concat");//文件合并var plugins = require('gulp-load-plugins')();//之后使用 plugins.rename 相当于 rename = require('gulp-rename');//--minify-css 改为驼峰minifyCss//plugins.minifyCss()gulp.task('commoncss',function(){    return gulp.src(['app/lib/css/*.css','app/css/mystyle.css'])//传入多个不同路径    .pipe(plugins.order([//处理文件排序        'reset.css',        '*.css',        'mystyle.css'    ]))    .pipe(plugins.minifyCss())//css压缩    .pipe(plugins.concat('common.min.css'))//合并到 common.min.css 中    .pipe(gulp.dest('app/dist/css'))})gulp.task('commonjs', function() {    return gulp.src(['app/lib/js/*.js','app/js/mymain.js'])//传入多个不同路径    .pipe(plugins.order([//处理文件排序        'jquery.min.js',        '*.js',        'mymain.js'    ]))   .pipe(plugins.rename({suffix:'.min'})) //重命名增加.min后缀   .pipe(plugins.uglify()) //js 压缩   .pipe(plugins.concat('common.min.js'))//合并到 common.min.js 中   .pipe(gulp.dest('app/dist/js'))  //输出到 这个目录  })gulp.task('myjs',function(){    return gulp.src('app/js/mymain.js')    .pipe(plugins.uglify())    .pipe(plugins.rename({suffix:'.min'}))     .pipe(gulp.dest('app/dist/js'))})gulp.task("mycss",function(){    return gulp.src('app/css/mystyle.css')    .pipe(plugins.rename({suffix:'.min'}))    .pipe(plugins.minifyCss())    .pipe(gulp.dest('app/dist/css'))})gulp.task('defaultA',gulp.series('commoncss','commonjs'));gulp.task('defaultB',gulp.parallel('mycss','myjs'));gulp.task('webserver', function() {    plugins.connect.server({        root: 'app',//项目目录        port: 8000,        livereload: true    });});复制代码