Gulpjs 学习笔记一——安装和实例

Gulpjs 基于 nodeJs ，简单点说就是一个前端向自动化工具，所以请在学习前安装 nodeJs ，同时建议使用 cnpm.

学习链接： [GulpjsGetStart][GulpjsGetStart] [Nodejs 学习笔记一(editing)][NodejsStudy1]

安装 Gulp

全局安装

npm install -g gulp

项目安装

npm install --save-dev gulp

在项目根目录创建 gulpfile.js 文件以进行配置

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行

gulp

gulp

注意：以下部分插件并非 gulp 专有，只是涉及到了弄过来方便学习.

Gulp 实例

默认 gulp task 代码块

代码内容

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  console.log(520);
});

运行命令

gulp 或者 gulp default 都可执行默认 gulp task

gulp-minify 插件实例

一个 js 压缩工具，基于 uglify 实现

安装 [gulp-minify][gulp-minify]

cnpm install --save-dev gulp-minify

代码内容

以下代码要注意声明方法已由 var 变为 const，以防止变量冲突.

const gulp = require('gulp'),
       minify = require('gulp-minify');
gulp.task('minifyjs', function() {
    gulp.src('./js/*.js',{base:'js'})
        .pipe(minify({
            ext: {
                src: '.js',
               min: '.min.js'
            },
            exclude: ['tasks'],
            ignoreFiles: ['*.combo.js', '*-min.js', '*.min.js']
        }))
        .pipe(gulp.dest('js'))
});

gulp-uglify 插件实例

一个 js 压缩工

安装 [gulp-uglify][gulp-uglify]

npm install --save-dev gulp-uglify

代码内容

const gulp = require('gulp'),
      pump = require('pump'),
      uglify = require('gulp-uglify');
gulp.task('compressjs',['delorgmin'], function(){
    return pump([
        gulp.src('Public/js/zhuanti/*/*.js',{base:'Public'}),
        uglify(),// 默认直接覆盖压缩源文件
        gulp.dest('Public')
    ]);
});

gulp-rename 插件实例

一个重命名工具

安装 [gulp-rename][gulp-rename]

cnpm install --save-dev gulp-rename

代码内容

const gulp = require('gulp'),
      pump = require('pump'),
      uglify = require('gulp-uglify'),
      del = require('del'),
      rename = require('gulp-rename');
gulp.task('delorgmin',function(){
    return del(['Public/js/zhuanti/*/*.min.js','!Public/js/jQuery.min.js']);// 在压缩之前删除之前的已压缩文件
});
gulp.task('compressjs',['delorgmin'], function(){
    return pump([
        gulp.src('Public/js/zhuanti/*/*.js',{base:'Public'}),
        uglify(),// 默认直接覆盖压缩源文件
        rename({
            extname: ".min.js"
        }),
        gulp.dest('Public')
    ]);
});

pump 实例

一个简化 npm 管道代码工具

安装 [pump][pump]

npm install pump

代码内容

const gulp = require('gulp'),
      minify = require('gulp-minify'),// 压缩
      pump = require('pump'),
      del = require('del');
gulp.task('minifyjs-pump',function(){
    del('Public/js/zhuanti/*/*.min.js'),// 在压缩之前删除之前的已压缩文件
    pump([
        gulp.src('Public/js/zhuanti/*/*.js',{base:'Public'}),
        minify({
            ext: {
                src: '.js',
                min: '.min.js'
            },
            exclude: ['tasks'],
            ignoreFiles: ['*.combo.js', '*-min.js', '*.min.js']
        }),
        gulp.dest('Public')// 当 base 和 dest 相同时即在当前文件夹生成
    ]);
});

del 实例

一个删除文件的工具

安装 [del][del]

cnpm install --save-dev del

代码内容

const gulp = require('gulp'),
      del = require('del');
gulp.task('delorgmin',function(){
    del('Public/js/*.min.js');
});

gulp-cssnano 实例

一个基于 cssnano 插件的 css 压缩工具

安装 [gulp-cssnano][gulp-cssnano]

cnpm install --save-dev gulp-cssnano

代码内容

const gulp = require('gulp'),
      pump = require('pump'),
      del = require('del'),
      cssnano = require('gulp-cssnano'),
      rename = require('gulp-rename');
gulp.task('delorgmincss',function(){
    return del(['Public/css/zhuanti/*/*.min.css']);// 在压缩之前删除之前的已压缩文件
});
gulp.task('compresscss',['delorgmincss'], function(){
    return pump([
        gulp.src('Public/css/zhuanti/*/*.css',{base:'Public'}),
        cssnano(),
        rename({
            extname: ".min.css"
        }),
        gulp.dest('Public')
    ]);
});

gulp-sourcemaps 实例

一个生成 source maps 的工具

安装 [gulp-sourcemaps][gulp-sourcemaps]

cnpm install --save-dev gulp-sourcemaps

代码内容

const gulp = require('gulp'),
      pump = require('pump'),
      del = require('del'),
      cssnano = require('gulp-cssnano'),
      sourcemaps = require('gulp-sourcemaps');
gulp.task('delorgmincss',function(){
    return del(['Public/css/zhuanti/*/*.min.css','Public/css/zhuanti/*/*.map']);// 在压缩之前删除之前的已压缩文件
});
gulp.task('compresscss',['delorgmincss'], function(){
    return pump([
        gulp.src(['Public/css/zhuanti/*.css','Public/css/zhuanti/*/*.css'],{base:'Public'}),
        sourcemaps.init(),
        cssnano(),
        rename({
            extname: ".min.css"
        }),
        sourcemaps.write('/'),// 在当前目录下生成 map sources 文件
        gulp.dest('Public')
    ]);
});

gulp-imagemin 实例

一个图片压缩工具，直接对 png jpg gif svg 4种格式无损压缩

安装 [gulp-imagemin][gulp-imagemin]

cnpm install --save-dev gulp-imagemin

代码内容

const gulp = require('gulp'),
      imagemin = require('gulp-imagemin');
gulp.task('optimizeall', function(){
    gulp.src('Public/images/banner2/*',{base:'Public'})
        .pipe(imagemin())
        .pipe(gulp.dest('Public'))
});

imagemin-optipng 实例

imagemin 捆绑的单独无损压缩 png 插件

安装 [imagemin-optipng][imagemin-optipng]

cnpm install --save imagemin-optipng

代码内容

const gulp = require('gulp'),
      imagemin = require('gulp-imagemin'),
      imageminOptipng = require('imagemin-optipng');
gulp.task('optimizepng', function() {
    return gulp.src('Public/images/banner3/*.png',{base:'Public'})
        .pipe(imagemin(imageminOptipng()))
        .pipe(gulp.dest('Public'))
});

Ps. 余下 imagemin 捆绑的常用插件还有 imagemin-jpegtran imagemin.gifsicle imagemin.svgo，具体操作类本例 imagemin-optipng ，以下不作详述。

gulp-autoprefixer 实例

一个自动填充 css 浏览器前缀的工具

安装 [gulp-autoprefixer][gulp-autoprefixer]

cnpm install --save-dev gulp-autoprefixer

代码内容

const gulp = require('gulp'),
      pump = require('pump'),
      autoprefixer =require('gulp-autoprefixer');
gulp.task('fixcsspre', function() {
    return pump([
        gulp.src('Public/css/common/common.css',{base:'Public'}),
        autoprefixer({
            browsers: ['>0.01%','Explorer>=7'], //添加前缀以支持全球统计超过0.01%使用率的浏览器，IE7及其以上版本，具体的参数看本task结尾
            cascade: false, //是否美化属性值 默认：true
            remove: false //是否去掉不必要的前缀 默认：true
        }),
        gulp.dest('Public')
    ]);
});

gulp-autoprefixer browsers 参数

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%的使用率

浏览器标识

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-notify 实例

一个桌面 toast 提醒工具，在不同终端上显示方式不同

安装 [gulp-notify][gulp-notify]

npm install --save-dev gulp-notify

代码内容

const gulp = require('gulp'),
      pump = require('pump'),
      notify = require('gulp-notify');
gulp.task('toast', function() {
    // 将你的默认的任务代码放在这
    return pump([
        gulp.src('Public/js/2.js',{base:'Public'}),
        notify('you are kidding me! \r you are kidding me! \r you are kidding me! \r you are kidding me! \r you are kidding me!'),
        gulp.dest('Public')
    ]);
});

gulp-concat 实例

一个文件合并工具

安装 [gulp-concat][gulp-concat]

cnpm install --save-dev gulp-concat

代码内容

const gulp = require('gulp'),
      concat = require('gulp-concat'),
      notify = require('gulp-notify');
gulp.task('concatjs', function() {
    let concatRule = ['Public/js/zhuanti/zwf2/*.js', '!Public/js/zhuanti/zwf2/*.min.js', '!Public/js/zhuanti/zwf2/all.js'];
    gulp.src(concatRule, {
            base: 'Public'
        })
        .pipe(concat('all.js', {
            newLine: ';\n\r' // 在每个合并文件的结尾添加分号+空格+换行，适用于合并js文件
        }))
        .pipe(gulp.dest('Public/js/zhuanti/zwf2'))
        .pipe(notify('已完成本次合并.'));
});

参考链接： GulpjsGetStart | gulp-minify | gulp-uglify | gulp-rename | pump | del | gulp-cssnano | gulp-sourcemaps | gulp-imagemin | imagemin-optipng | gulp-autoprefixer | gulp-notify | gulp-concat