从零开始用gulp

Posted 2020-08-22 最骚的就是你

gulp是基于流的前端构件化工具。目前比较火的前端构建化工具还是挺多的，grunt gulp fis3等等。

这个鬼东西有什么用？请参考https://www.zhihu.com/question/35595198

为什么选择gulp,因为使用非常简单，学习成本低。以后想用别的工具再转去学也不难。

一个自动化构建工具都没用过的前端，何以谈人生？

 

以下是正题：

1.要玩gulp,首先得安装node,因为npm跟随node的包安装管理工具。具体下载直接百度nodejs中文网，根据自身的环境（windows linux mac）下载安装包（msi）。直接进行傻瓜式安装。

2.安装完node后开始全局安装gulp, 在命令行输入命令 npm install -g gulp ,安装成功后就可以在命令行输入gulp相关的命令了，例如gulp -v查看当前版本号。（npm安装不成功建议在命令前加sudo 或将 npm 换 cnpm 再试试）

3.在项目中安装 npm install --save-dev gulp，安装成功后就可以开始写配置文件了。

4.在项目根目录中创建文件  gulpfile.js

以下是简单的gulpfile.js  demo代码

代码这种东西一开始不会写，就先抄，抄着抄着就懂怎么写了。

//引入插件
var gulp = require(\'gulp\');
var less = require(\'gulp-less\');//需要npm install --save-dev gulp-less

var paths = [\'./css/*.less\'];　　//定义一个数组，指定文件路径

//下面开始编写一个任务
//less编译任务 
gulp.task(\'less\', function() {   //创建一个gulp任务，任务名字是\'less\'，然后一个回调函数
    return gulp.src(paths)　　　　//gulp任务操作的源文件\'paths\'
           .pipe(less())         //执行less编译
           .pipe(gulp.dest(\'./css\'));  //gulp任务输出的新文件
});
//watch监听任务
gulp.task(\'watch\', function(){   //创建第二个gulp任务，任务名字是‘watch\',然后一个回调函数
    gulp.watch(paths,[\'less\']);  //gulp的watch监听，文件改动后立即重新执行less任务 可参考http://www.gulpjs.com.cn/docs/api/
});
//gulp.watch(\'default\',[\'less\']);
gulp.task(\'default\', [\'less\',\'watch\']);　　//gulp的default任务，相当于glup的执行入口。然后把less任务和watch放进来，该脚本就会执行这两个任务

 

把以上代码写入gulpfile.js 后保存，然后项目根路径下执行命令 

gulp

就开始执行gulp完成你安排的任务。

日常开发中需要gulp做的有很多如合并文件（gulp-concat）压缩（gulp-uglify）重命名（gulp-rename）等等。

这就需要自己编写task来让gulp来执行。

最后总结一下，写好一个gulpfile.js很简单，结合demo代码和下面五个命令

gulp.task(name, fn)//新建一个gulp任务，name是任务名，fn回调函数

gulp.run(tasks...)//尽可能多的并行运行多个task 新版本中的gulp中使用run会发出警告，这样的情况下我们可以用start代替

gulp.watch(glob, fn//)当glob内容发生改变时，执行fn

gulp.src(glob)//返回一个可读的stream

gulp.dest(glob)//返回一个可写的stream

 需要更多的说明或者操作可以去下面的网站逛一逛

gulp官方网址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

最后简单写就几个常用的gulp task，方便日后调用

一、压缩css

var minifycss = require(\'gulp-minify-css\');//引用插件，需npm install --save-dev gulp-minify-css

gulp.task(\'minifycss\', function() {
return gulp.src(\'src/css/*.css\') //压缩的文件
.pipe(minifycss()) //执行压缩
.pipe(gulp.dest(\'dst/css\')); //输出文件夹
});

二、压缩js

var concat = require(\'gulp-concat\'),

    uglify = require(\'gulp-uglify\'),

    rename = require(\'gulp-rename\');　　//引用插件，需npm install --save-dev xxxxxx

gulp.task(\'minifyjs\', function() {

    return gulp.src(\'src/*.js\')　　//操作的源文件

        .pipe(concat(\'main.js\'))    //合并所有js到main.js

        .pipe(gulp.dest(\'minified/js\'))    //输出main.js到文件夹

        .pipe(rename({suffix: \'.min\'}))   //rename压缩后的文件名

        .pipe(uglify())    //压缩

        .pipe(gulp.dest(\'minified/js\'));  //输出

});

 三、清空输出目录

var del =require(\'del\');
gulp.task(\'clean\', function() {
  return del([\'dst\']);　　//\'dst\'是一个目录
});

四、压缩图片

const imagemin = require(\'gulp-imagemin\');
 
gulp.task(\'default\', function(){
    return gulp.src(\'src/images/*\')
           .pipe(imagemin())
           .pipe(gulp.dest(\'dist/images\'));
});

五、压缩html

var gulp = require(\'gulp\'),
    htmlmin = require(\'gulp-htmlmin\');
 
gulp.task(\'htmlMin\', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src(\'src/*.html\')
        .pipe(htmlmin(options))
        .pipe(gulp.dest(\'dst\'));
});

六、合并文件

var concat = require(\'gulp-concat\');
 
gulp.task(\'concat\', function () {
    gulp.src(\'src/js/*.js\')
        .pipe(concat(\'all.js\'))//合并后的文件名
        .pipe(gulp.dest(\'dist/js\'));
});

七、css自动处理浏览器前缀,如添加-webkit-解决浏览器兼容问题

var autoprefixer = require(\'gulp-autoprefixer\');
 
gulp.task(\'autoprefixer\', function () {
    gulp.src(\'css/index.css\')
        .pipe(autoprefixer())
        .pipe(gulp.dest(\'dist/css\'));
});