glup入门教程

发表于 | 分类于 | 浏览 次

gulp教程之 jshint

gulp jshint 插件主要用于检查代码，打印报告信息。

jshint 的安装命令:

1
ncmp install jshint gulp-jshint --save-dev

gulpfile.js 文件配置：

1
2
3
4
5
6
7
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("scripts",function(){
   gulp.src("src/js/*.js")
      .pipe(jshint())
      .pipe(jshint.reporter("default"))
});

执行命令： gulp scripts

如果想要让检查的信息以突出的样式显示，可以使用 jshint-stylish 插件来实现

给检索代码结果添加样式 的 jshint-stylish 插件安装命令：

1
cnpm install --svae-dev jshint-stylish

gulpfile.js 文件配置：

1
2
3
4
5
6
7
8
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("scripts",function(){
   gulp.src("src/js/*.js")
      .pipe(jshint())
      .pipe(jshint.reporter("stylish"))
      //.pipe(jshint.reporter("jshint-stylish"))  //或直接引用，不使用上一行的方式
});

如果想查看检查结果的详细的错误信息，可以使用 map-stream 这个插件

检索代码具体错误信息插件的安装命令：

1
cnpm install --save-dev map-stream

gulpfile.js 文件配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var map = require("map-stream");
var customerReporter = map(function (file, cb) {
    if (!file.jshint.success) {
        //打印出错误信息
        console.log("jshint fail in:" + file.path);
        file.jshint.results.forEach(function (err) {
            if (err) {
                console.log(err);
                console.log("在 " + file.path + " 文件的第" + err.error.line + " 行的第" + err.error.character + " 列发生错误");
            }
        });
    }
});
gulp.task("scripts", function () {
    gulp.src("src/js/*.js")
        .pipe(jshint())
        .pipe(customerReporter);
});

执行命令： gulp scripts

gulp-concat（合并文件）

gulp 的 concat 插件主要用于合并文件，把也就是多个文件合并到一个文件中，以节省存储空间。

安装命令：

1
cnpm install --save-dev gulp-concat

gulpfile.js 文件配置：

1
2
3
4
5
6
var concat = require('gulp-concat');
gulp.task("scripts",function(){
   gulp.src("src/js/*.js")
   .pipe(concat("all.js"))
   .pipe(gulp.dest("dist"))
});

在cmd 命令行控制器中执行定义好的任务：

1
gulp concat

gulp-if

插件功能描述

为功能执行添加条件判断，跟程序语言中的if是相同语义

插件安装

1
cnpm install gulp-if --save-dev

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gulp     = require('gulp'),
    gulpif   = require('gulp-if'),
    imagemin = require('gulp-imagemin'),
    pump     = require('pump');
// 是否生产环境
global.production = true;
gulp.task('testImagemin', function () {
    pump([
        gulp.src('src/img/*.{png,jpg,gif,ico}'),
        // 生产环境，对图片进行压缩，否则不压缩
        gulpif(!global.production, imagemin()),
        gulp.dest('dist/img')
    ])
});

gulp-rename

插件功能描述

修改文件名，例如将demo.css修改为demo.min.css，一般配合gulp-minify-css/gulp-uglify压缩插件一起使用

插件安装

1
cnpm install gulp-rename --save-dev

使用方法

CSS文件压缩后进行更名为xxx.min.css，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp = require('gulp'),
    minifyCss   = require('gulp-minify-css'),
    rename      = require('gulp-rename'),
    pump        = require('pump');
gulp.task('testRenameCss', function(cb) {
    pump([
        gulp.src('src/css/*.css'),
        rename({suffix: '.min'})
        minifyCss({
            keepSpecialComments: '*'
        }),
        gulp.dest('dist/css')
    ])
});

js文件压缩后更名为xxx.min.js

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp       = require('gulp'),
    minifyCss  = require('gulp-uglify'),
    rename     = require('gulp-rename'),
    pump       = require('pump');
gulp.task('testRenameJs', function(cb) {
    pump([
        gulp.src('src/js/*.js'),
        rename({suffix: '.min'}),
        uglify(),
        gulp.dest('dist/js')
    ])
});

gulp-clean

插件功能描述

删除文件及文件夹

插件安装

1
cnpm install gulp-clean --save-dev

使用方法

删除dist文件夹

1
2
3
4
5
6
7
8
9
var gulp        = require('gulp'),
    clean       = require('gulp-clean'),
    pump        = require('pump');
gulp.task('clean', function(cb) {
    pump([
        gulp.src('./dist'),
        clean()
    ], cb)
})

gulp-imagemin

插件功能描述

图片文件压缩（包括PNG、JPEG、GIF和SVG图片）

插件安装

1
cnpm install gulp-imagemin --save-dev

使用方法

参数

1
2
3
4
5
6
7
8
9
10
11
var gulp     = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pump     = require('pump');
gulp.task('testImagemin', function (cb) {
    pump([
        gulp.src('src/img/*.{png,jpg,gif,ico}'),
        imagemin(),
        gulp.dest('dist/img')
    ], cb);
});

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gulp     = require('gulp'),
    imagemin = require('gulp-imagemin'),
    pump     = require('pump');
gulp.task('testImagemin', function (cb) {
    pump([
        gulp.src('src/img/*.{png,jpg,gif,ico}'),
        imagemin({
            optimizationLevel: 5, //类型：Number  默认：3  取值范围：0-7（优化等级）
            progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
            interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
            multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
        }),
        gulp.dest('dist/img')
    ], cb);
});

深度压缩图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp     = require('gulp'),
    imagemin = require('gulp-imagemin'),
    //cnpm install imagemin-pngquant --save-dev
    pngquant = require('imagemin-pngquant'),
    pump     = require('pump');
gulp.task('testImagemin', function () {
    pump([
        gulp.src('src/img/*.{png,jpg,gif,ico}'),
        imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox属性
            use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
        }),
        gulp.dest('dist/img')
    ], cb);
    });

gulp-htmlmin

插件功能描述

html文件压缩，可以压缩页面JavaScript、css，去除页面空格、注释，删除多余属性等操作。

插件安装

1
cnpm install gulp-htmlmin --save-dev

使用方法

参数

1
2
3
4
5
6
7
8
9
10
11
var gulp     = require('gulp'),
    htmlmin  = require('gulp-htmlmin'),
    pump     = require('pump');
gulp.task('testHtmlmin', function () {
    pump([
        gulp.src('src/html/*.html'),
        htmlmin(),
        gulp.dest('dist/html')
    ], cb)
});

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
gulp.task('testHtmlmin', 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
    };
    pump([
        gulp.src('src/html/*.html'),
        htmlmin(options),
        gulp.dest('dist/html')
    ], cb)
});

gulp-less

插件功能描述

将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息。

插件安装

1
cnpm install gulp-less --save-dev

使用方法

普通使用

1
2
3
4
5
6
7
8
9
10
11
var gulp   = require('gulp'),
    less   = require('gulp-less'),
    pump   = require('pump');
gulp.task('testLess', function (cb) {
    pump([
        gulp.src('src/less/index.less'),
        less(),
        gulp.dest('src/css')
    ], cb)
});

编译多个less文件

1
2
3
4
5
6
7
8
9
10
11
var gulp   = require('gulp'),
    less   = require('gulp-less'),
    pump   = require('pump');
gulp.task('testLess', function (cb) {
    pump([
        gulp.src(['src/less/index.less','src/less/detail.less']),
        less(),
        gulp.dest('src/css')
    ], cb)
});

匹配符“!”，“”，“*”，“{}”

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp   = require('gulp'),
    less   = require('gulp-less'),
    pump   = require('pump');
gulp.task('testLess', function (cb) {
    pump([
        //编译src目录下的所有less文件
        //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
        gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less']),
        less(),
        gulp.dest('src/css')
    ], cb)
});

组合使用

组合gulp-minify-css
编译less后压缩css

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp      = require('gulp'),
    less      = require('gulp-less'),
    minifyCss = require('gulp-minify-css'),
    pump      = require('pump');
gulp.task('testLess', function (cb) {
    pump([
        gulp.src(['src/less/index.less']),
        less(),
        minifyCss(),
        gulp.dest('src/css')
    ], cb)
});

gulp-autoprefixer

插件功能描述

根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。【特别是开发移动端页面时，就能充分体现它的优势。例如兼容性不太好的flex布局。】

插件安装

1
cnpm install gulp-autoprefixer --save-dev

使用方法

参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var gulp         = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    pump         = require('pump');
gulp.task('testAutoFx', function(cb) {
    pump([
        gulp.src('src/css/index.css'),
        autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            cascade: true,
            //是否去掉不必要的前缀 默认：true
            remove :true
        }),
        gulp.dest('dist/css')
    ], cb)
});

常用参数

gulp-autoprefixer的browsers参数详解（）

1
2
3
4
5
6
7
8
● last 2 versions: 主流浏览器的最新两个版本
● last 1 Chrome versions: 谷歌浏览器的最新版本
● last 2 Explorer versions: IE的最新两个版本
● last 3 Safari versions: 苹果浏览器最新三个版本
● Firefox >= 20: 火狐浏览器的版本大于或等于20
● iOS 7: IOS7版本
● Firefox ESR: 最新ESR版本的火狐
● > 5%: 全球统计有超过5%的使用率

各浏览器的标识：

1
2
3
4
5
6
7
8
9
10
11
12
13
Android for android WebView.
BlackBerry or bb for Blackberry browser.
Chrome for Google Chrome.
Firefox or ff for Mozilla Firefox.
Explorer or ie for Internet Explorer.
ios or ios_saf for iOS Safari.
Opera for Opera.
Safari for desktop Safari.
OperaMobile or op_mob for Opera Mobile.
OperaMini or op_mini for Opera Mini.
ChromeAndroid or and_chr
FirefoxAndroid or and_ff for Firefox for Android.
ExplorerMobile or ie_mob for Internet Explorer Mobile.

gulp-sourcemaps

插件功能描述

生成sourcemap文件

插件安装

1
cnpm install gulp-sourcemaps --save-dev

使用方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var gulp        = require('gulp'),
    uglify      = require('gulp-uglify'),
    concat      = require('gulp-concat'),
    sourcemaps  = require('gulp-sourcemaps')
    pump        = require('pump');
gulp.task('jsmin', function(cb) {
    pump([
        gulp.src('src/js/*.js'),
        sourcemaps.init(),
        concat('demo.js'),
        uglify(),
        sourcemaps.write(),
        gulp.dest('dist/js')
    ], cb
    )
});

gulp-rev-append

使用gulp-rev-append给页面的引用添加版本号，清除页面引用缓存。

github：https://github.com/bustardcelly/gulp-rev-append

安装gulp-rev-append

1
cnpm install gulp-rev-append --save-dev

配置html页面引用

gulp-rev-append 插件将通过正则(?:href|src)=”(.)[?]rev=(.)[“]查找并给指定链接填加版本号（默认根据文件MD5生成，因此文件未发生改变，此版本号将不会变）

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css?rev=@@hash">
    <script src="js/js-one.js?rev=@@hash"></script>
    <script src="js/js-two.js"></script>
  </head>
  <body>
    <div>hello, world!</div>
    <img src="img/test.jpg?rev=@@hash" alt="" />
    <script src="js/js-three.js?rev=@@hash"></script>
  </body>
</html>

配置gulpfile.js

基本使用（给页面引用url添加版本号，以清除页面缓存）

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    rev = require('gulp-rev-append');
gulp.task('testRev', function () {
    gulp.src('src/html/index.html')
        .pipe(rev())
        .pipe(gulp.dest('dist/html'));
});

执行任务

命令提示符执行：gulp testRev

gulp-minify-css

本地安装gulp-minify-css

github：https://github.com/jonathanepollack/gulp-minify-css

安装：命令提示符执行

1
cnpm install gulp-minify-css --save-dev

配置gulpfile.js

基本使用

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

gulp-minify-css 最终是调用clean-css ,其他参数查看这里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin({
            advanced: false,//类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('dist/css'));
});

给css文件里引用url加版本号（根据引用文件的md5生产版本号），像这样：

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp'),
    cssmin = require('gulp-minify-css');
    //确保已本地安装gulp-make-css-url-version [cnpm install gulp-make-css-url-version --save-dev]
    cssver = require('gulp-make-css-url-version');
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssver()) //给css文件里引用文件加版本号（文件MD5）
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
});

若想保留注释，这样注释即可：

1
2
3
/*!
   Important comments included in minified output.
*/

执行任务

命令提示符执行：gulp testCssmin

gulp-uglify

安装gulp-uglify

github：https://github.com/terinjokes/gulp-uglify

安装：命令提示符执行

1
cnpm install gulp-uglify --save-dev

注意：没有安装cnpm请使用 npm install gulp-uglify –save-dev
说明：–save-dev 保存配置信息至 package.json 的 devDependencies 节点。

配置gulpfile.js

基本使用

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    uglify = require('gulp-uglify');
gulp.task('jsmin', function () {
    gulp.src('src/js/index.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

压缩多个js文件

1
2
3
4
5
6
7
8
var gulp = require('gulp'),
    uglify = require('gulp-uglify');
gulp.task('jsmin', function () {
    gulp.src(['src/js/index.js','src/js/detail.js']) //多个文件以数组形式传入
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

匹配符“!”，“”，“*”，“{}”

1
2
3
4
5
6
7
8
9
10
var gulp = require('gulp'),
    uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
    //压缩src/js目录下的所有js文件
    //除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

指定变量名不混淆改变

1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp'),
    uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
            //mangle: true,//类型：Boolean 默认：true 是否修改变量名
            mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆关键字
        }))
        .pipe(gulp.dest('dist/js'));
});

gulp-uglify其他参数 具体参看

1
2
3
4
5
6
7
8
9
10
11
12
var gulp = require('gulp'),
    uglify= require('gulp-uglify');
gulp.task('jsmin', function () {
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
            mangle: true,//类型：Boolean 默认：true 是否修改变量名
            compress: true,//类型：Boolean 默认：true 是否完全压缩
            preserveComments: 'all' //保留所有注释
        }))
        .pipe(gulp.dest('dist/js'));
});

执行任务

命令提示符执行：gulp jsmin

gulp-run-sequence

插件功能描述

控制多个任务进行顺序执行或者并行执行

插件安装

1
cnpm install gulp-run-sequence --save-dev

使用方法

执行前端代码自动构建，一般会分为
删除目标目录

  1. 代码压缩打包（这其中包括js，CSS，HTML，图片的压缩打包，这些步骤是可以并行执行的）
  2. 开启浏览器
  3. 监控代码

使用如下代码，则可以控制流程为
clean执行，执行完成
js,css,html.image并行执行，全部执行完成
watch执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var gulp        = require('gulp'),
    runSequence = require('gulp-run-sequence'),
    pump        = require('pump');
gulp.task('default', function(cb) {
  runSequence(
    'clean',
    ['js', 'css', 'html', 'image'],
    'watch',
    cb
  );
});
gulp.task('clean', function(cb) {...});
gulp.task('js', function(cb) {...});
gulp.task('css', function(cb) {...});
gulp.task('html', function(cb) {...});
gulp.task('image', function(cb) {...});
gulp.task('watch', ['browser'], function(cb) {...});

browser-sync

插件功能描述

同步浏览器，具体可点击参考

插件安装

1
cnpm install browser-sync --save-dev

使用方法

参数

开启浏览器，并定义dist目录下的html/css/js发生变化直接同步至浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var gulp         = require('gulp'),
    browserSync  = require('browser-sync').create();
gulp.task('browser', function() {
    browserSync.init([
        './dist/**/*.html',
        './dist/**/*.css',
        './dist/**/*.js'
    ], {
        server: {
            baseDir: "./"
        }
    });
});
// 监控src目录下css文件，发生变化则执行css任务
// 监控src目录下js文件，发生变化则执行js任务
// 监控src目录下html文件，发生变化则执行html任务
gulp.task('watch', ['browser'], function() {
    gulp.watch('./src/**/*.css', ['css']);
    gulp.watch('./src/**/*.js', ['js']);
    gulp.watch('./src/**/*.html', ['html']);
})

require-dir

插件功能描述

使用gulpfile.js单文件编写任务，会造成文件过大，通过使用 require-dir 模块将任务分离到多个文件

插件安装

1
cnpm install require-dir --save-dev

使用方法

###文件结构：

gulpfile.js
tasks/
├── dev.js
├── release.js
└── test.js

gulpfile.js

1
2
var requireDir = require('require-dir');
requireDir('./tasks', { recurse: true });

gulp会自动加载tasks目录下所有文件中定义的任务，并执行default任务

本文有任何错误，或有任何疑问，欢迎留言说明。

邮箱: opensmarty@163.com
QQ: 1327400982

Reference links

gulp入门教程

---------------- The End ----------------
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微薄 豆瓣 一键分享 更多