前端构建工具Gulp

Gulp干嘛的？如题。下面的内容里会有一些详细功能。

其实虽然闻名已久，我也是今天才开始研究。

所以边研究边做个笔记，希望同大家一起进步。

Gulp开始:

1.安装包

全局:npm install gulp -g

项目:npm install --save-dev gulp

2.配置文件

创建gulpfile.js在你的项目根目录，通俗来说这就是gulp的配置文件，你想运用gulp的哪些功能，就在里面配置就行了(其实就是在这文件里面写代码)

3.运行: 

cd到项目根目录，敲个命令 gulp  就OK了

功能举例展现:

一.删除文件及文件夹

安装gulp的删除模块

$ npm install --save-dev gulp del

这里删除分为两种情况:项目启动前和项目启动后，下面分别介绍。

1.项目启动前

用webstorm的都知道，它会在我们的项目里创建.idea文件夹，用vscode的话它会创建.setting文件夹。可实际发布环境中，这些都是不必要的，这时我们就可以通过gulp来删除了。下面展示如何在项目启动前删除:

var gulp = require('gulp');
var del = require('del');
//创建任务del
gulp.task('del',function(cb){
    del([
        './1.txt', //删除文件
        './123/*', //删除123文件夹下的匹配项
        '!./123/3.txt'  //不要删除的文件
    ],cb);
});
//敲打gulp命令时,它会先寻找default这个默认任务,然后根据第二个参数去查找任务执行。当然也可以直接gulp+任务名来执行任务
gulp.task('default',['del']);

2.项目启动后(类似将要删除的文件被引用或正在使用)

npm install --save-dev gulp del vinyl-paths

var gulp = require('gulp');
var del = require('del');
var vinylPaths = require('vinyl-paths');
gulp.task('clean', function () {
    //用vinylPath来记录下要删除的文件的地址
    var vp=vinylPaths();
    gulp.src('1.js')
     .pipe(vp)
    .pipe(gulp.dest('dist'))
    .on('end',function(){
        //删除文件
        del(vp.paths);
    });
});
gulp.task('default', ['clean']);

二. 压缩合并

npm install --save-dev gulp-minify-css gulp-concat gulp-uglify

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify');
    
//压缩合并css
gulp.task('minifycss', function() {
     gulp.src('./css/*.css')      //压缩的文件
        .pipe(minifycss())  //执行压缩
        .pipe(concat('main.css'))  //合并到main.css中
        .pipe(gulp.dest('minified'));  //输出文件夹
});
//压缩合并js
gulp.task('minifyjs', function() {
    return gulp.src('./javascript/*.js')   //也可以是数组,例如['foo/*', 'bar/*']
        .pipe(uglify())    //压缩
        .pipe(concat('main.js'))    //合并所有js到main.js
        .pipe(gulp.dest('minified'));    //输出main.js到文件夹
});

先写到这，下来会继续写