基于gulp的前端自动化学习记录

作者: zephryu | 来源:发表于2016-12-10 00:19 被阅读251次

前端内容的自动化构建
gulp 笔记要点概况
基于gulp的前端自动化学习记录
Gulp
『前端工程化』gulp(gulp3 && gul
gulp详解一
相关文章记录
新手Gulp的安装和使用
新手Gulp的安装和使用
gulp前端自动化开发的工具

写在前面

个人学习记录，配置有可能有打错的地方，还请不吝赐教。

安装gulp

首先全局安装：

    $npm install gulp -g

在指定的目录下安装gulp并存为开发依赖

    $npm install gulp --save-dev

插播一段说明：--save 与--save-dev

--save是存为运行依赖（启动应用所必须）

--save-dev是存为开发依赖（修改源码所必须）

gulp初始化

在目录中创建一个gulpfile.js的文件保存gulp的配置
配置说明：

   var gulp=require('gulp') //获取gulp模块
   
   gulp.task('default',function(){
        //something
    });
    //配置默认事件

有关gulp事件的说明

    gulp.src('src/**/*.js') 
    //选择当前src目录中（包括子文件夹）所有的js文件
    （'src/*.js'）这种不包括子文件夹
    .pipe(some require) //用某模块来处理这些文件
    .pipe(gulp.dest('publice/js'))//输出处理后的文件 
    gulp.watch('src/*.js',['//some task'])//watch监视指定目录，若发生改变调用task 常用于自动编译或者刷新

gulp也可以配置异步调用，或者声明promise对象不过个人感觉一般用不到，如有需求可以查看文档：gulp中文api

gulp配置示例

首先是一个也许会常用的基于gulp的插件名称和说明

自动加上 css3 前缀LessPluginAutoPrefix = require("less-plugin-autoprefix")
应该有gulp 版本
Browsersync 同时进行浏览器显示效果的测试工具
gulp-concat js文件拼接 npm install gulp-concat --save-dev
gulp-uglify js文件压缩 npm install gulp-uglify --save-dev
gulp-clean-css css文件压缩 npm install gulp-clean-css --save-dev
gulp-changed 只编译修过过的文件 npm install gulp-changed --save-dev
gulp-babel es6转es5 react jsx 转换 npm install gulp-babel babel-preset-es2015 --save-dev
gulp-plumber 错误详细信息 npm install gulp-plumber --save-dev
gulp-util 杂用组件库 npm install gulp-util --save-dev
gulp-sourcemaps 生成依赖地图用来编译复杂的相互引用的less(比如bootstrap)，js(比如各种node模块)等文件) npm install gulp-sourcemaps --save-dev

配置Less编译和压缩

Less编译
安装 gulp-less

$ npm install gulp-less --save-dev

配置less自动编译

    var gulp=require('gulp');
    var less=require('gulp-less');
    gulp.task('less',function(){
        return gulp.src('less/*.less')
            .pipe(less())  //READE.ME文件中有例子，但其中的依赖项我暂时不知道干嘛的
            .pipe(gulp.dest('publice/css/'));
        });
    gulp.task('lessWatch',function(){
             gulp.watch('less/*.less',['less']);// 当less目录下的文件发生变化时运行less编译方法（注意不支持创建）
        });
   
    gulp.task('default',['lessWatch'])//默认启动less监视事件

以上就是最简单的基于gulp-less的less自动编译配置
下面我们来看看编译的同时压缩
基于gulp-clean-css
安装gulp-clean-css

$ npm install gulp-clean-css

在上面的配置文件基础上加入gulp-clean-css
单独使用可以参考READEME文档

    var gulp=require('gulp');
    var less=require('gulp-less');
    var cleanCSS=require('gulp-clean-css');
    gulp.task('less',function(){
        return gulp.src('Less/*.less')
            .pipe(less())  //READE.ME文件中有例子，但其中的依赖项我暂时不知道干嘛的
            .pipe(cleanCSS()) //添加这句话
            .pipe(gulp.dest('Publice/css/'));
        });
    gulp.task('lessWatch',function(){
             gulp.watch('Less/*.less',['less']);// 当less目录下的文件发生变化时运行less编译方法（注意不支持创建）
        });
   
    gulp.task('default',['lessWatch'])//默认启动less监视事件

gulp基本配置如此
下面附上一个可以编译复杂引用的less，同时报错可以输出错误信息的gulp配置示例

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //需要先确保安装gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //生成依赖地图
var plumber = require('gulp-plumber'); //错误管理
var gutil = require('gulp-util'); //实际的提醒
function errHandler( e ){
    gutil.log(e.toString());
} //创建一个显示错误信息的函数

gulp.task('less', function() {
     gulp.src('Less/*.less')
        .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(plumber( {errorHandler: errHandler}))
            .pipe(less())
            .pipe(cleanCSS()) //链式操作 先编译再压缩
        .pipe(sourcemaps.write('mpas'))
        .pipe(gulp.dest('Publice/css'));
});
gulp.task('watch',function(){
    gulp.watch('Less/*.less', ['less']);
});
gulp.task('default', ['watch']);

ES6转ES5并压缩混淆的配置

原理和逻辑与LESS并无太大不同
首先是安装

$ npm install gulp-babel babel-preset-es2015 --save-dev

然后是配置

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps'); //生成依赖地图
var plumber = require('gulp-plumber'); //错误管理
var gutil = require('gulp-util'); //实际的提醒
var babel=require('gulp-babel'); //es6转es5
var uglify = require('gulp-uglify'); //js压缩

function errHandler( e ){
    gutil.log(e.toString());
} //错误提示函数

gulp.task('es5change',function(){
    gulp.src('es6/*.js')
        .pipe(sourcemaps.init({loadMaps:true}))
            .pipe(plumber({errorHandler:errHandler}))
            .pipe(babel({
            presets: ['es2015']
            }))
            .pipe(uglify())
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('Publice/js'));
});

gulp.task('watch',function(){
    gulp.watch('es6/*.js', ['es5change']);
});

gulp.task('default', ['watch']);

最后附上Less和ES6转ES5的完整配置项

var gulp = require('gulp');
var less = require('gulp-less');
var cleanCSS = require('gulp-clean-css'); //需要先确保安装gulp-minify-css
var sourcemaps = require('gulp-sourcemaps'); //生成依赖地图
var plumber = require('gulp-plumber'); //错误管理
var gutil = require('gulp-util'); //实际的提醒
var babel=require('gulp-babel'); //es6转es5
var uglify = require('gulp-uglify'); //js压缩

function errHandler( e ){
    gutil.log(e.toString());
}

gulp.task('es5change',function(){
    gulp.src('es6/*.js')
        .pipe(sourcemaps.init({loadMaps:true}))
            .pipe(plumber({errorHandler:errHandler}))
            .pipe(babel({
            presets: ['es2015']
            }))
            .pipe(uglify())
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest('Publice/js'));
});

gulp.task('less', function() {
    "use strict";
     gulp.src('Less/*.less')
        .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(plumber( {errorHandler: errHandler}))
            .pipe(less())
            .pipe(cleanCSS()) //链式操作 先编译再压缩
        .pipe(sourcemaps.write('mpas'))
        .pipe(gulp.dest('Publice/css'));
});

gulp.task('watch',function(){
    gulp.watch('Less/*.less', ['less']);
    gulp.watch('es6/*.js', ['es5change']);
});


gulp.task('default', ['watch']);