小白初试gulp（一）

基于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
    });
});
复制代码