美文网首页前端笔记
gulp-自动化工具

gulp-自动化工具

作者: 2点半 | 来源:发表于2017-09-04 14:16 被阅读11次
创建gulp

基于npm的基础使用gulp，需先更新npm

npm install -g npm

全局安装gulp

npm install -g gulp

检查版本

gulp -v

一.建立站点
站点目录

项目开发中分两个环境:
build为生产环境
src为开发环境
两个环境要隔离开来

二.初始化建立pageage.json

npm init -y

一路yes

三.要在本地安装gulp 作为项目的开发依赖（devDependencies）安装

npm install --save-dev gulp

node_modules.png
四.在根目录建立一个gulpfile.js 用来做你想做的事情
var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});
方法罗列.png 开发版本分离模式.png 
删除文件 禁用 一旦删除无法恢复
var del=require('del');
gulp.task('del',function(){
    del([
        './src/css',
        './src/'
    ])
})

gulp自动化最佳实战

1.md5命名文件的方式

var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');
var cleanCss =require('gulp-clean-css');
var del=require('del');
var babel=require('gulp-babel');
var uglify = require('gulp-uglify');
var rename =require('gulp-rename');
var imagemin =require('gulp-imagemin');
var spriter = require('gulp-css-spriter');
var base64 = require('gulp-base64');
var browserSync = require('browser-sync').create();
var reload=browserSync.reload;
var rev=require('gulp-rev');//给文件名添加md5后缀
var revCollector=require('gulp-rev-collector'); //路径替换
var runSequence=require('run-sequence');
//var notify=require('gulp-notify');
var build={
    basePath:'./build/',
    css:'./build/css',
    images:'./build/images/',
    js:'./build/js/'
};
var src={
    basePath:'./src/',
    css:'./src/css/',
    images:'./src/images/',
    js:'./src/js/',
    less:'./src/less/'
};
/************************开发模式*****************************/
//服务器实时预览刷新
gulp.task('server:dev',function(){
    browserSync.init({
        server:{
            baseDir:src.basePath,
            index:'index.html'
        },
        port:80
    });
    gulp.watch('src/*.html',['html:dev']);
    gulp.watch('src/less/*.less',['less']);
    gulp.watch('src/css/*.css',['css:dev']);
    gulp.watch('src/js/*.js',['js:dev']);
    runSequence(['less'],['css:dev','js:dev']);

});
gulp.task('html:dev',function(){
    gulp.src(['./src/*.html'])
        .pipe(gulp.dest(src.basePath))
        .pipe(reload({stream:true}))
});

gulp.task('less',function(){
    gulp.src(src.less+'*.less')
        .pipe(less())
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream:true}))
});
gulp.task('css:dev',function(){
    gulp.src([src.css+'*.css','!'+src.css+'all.min.css','!'+src.css+'all.css'])
        .pipe(concat('all.css'))
        .pipe(spriter({
            'spriteSheet': src.images+'spritesheet.png',
            'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
        }))
        .pipe(base64())
        .pipe(gulp.dest(src.css))
        .pipe(cleanCss())
        .pipe(rename('all.min.css'))
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream:true}))
});

gulp.task('js:dev',function(){
    gulp.src([src.js+'*.js','!'+src.js+'all.js','!'+'src.js'+'all.min.js'])
        .pipe(babel({
            presets:['es2015']
        }))
        .pipe(concat('all.js'))
        .pipe(gulp.dest(src.js))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest(src.js))
        .pipe(reload({stream:true}))
});

/************************生成模式***************************/
gulp.task('server:product',function(){
    runSequence(['imagesmin','publish:html','publish:css','publish:js'],'rev');
    browserSync.init({
        server:{
            baseDir:build.basePath,
            index:'index.html'
        },
        port:81
    });
});
gulp.task('imagesmin',function(){
    gulp.src(src.images+'*.*')
        .pipe(imagemin())
        .pipe(gulp.dest(build.images))
});
gulp.task('publish:html',function(){
   gulp.src(src.basePath+'*.html')
       .pipe(gulp.dest(build.basePath))
});
gulp.task('publish:css',function(){
    gulp.src(src.css+'all.min.css')
        .pipe(rev())//发布新版本
        .pipe(gulp.dest(build.css))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev/css/'))
});
gulp.task('publish:js',function(){
    gulp.src(src.js+'all.min.js')
        .pipe(rev())
        .pipe(gulp.dest(build.js))
        .pipe(rev.manifest())
        .pipe(gulp.dest('./rev/js/'))
});
gulp.task('del:build',function(){
    del([
        build.basePath
    ])
});
gulp.task('rev',function(){
    return gulp.src(['./rev/**/*.json',build.basePath+'*.html'])
        .pipe(revCollector({}))
        .pipe(gulp.dest(build.basePath));
});

2.使用版本号参数的方式 要在HTML路径后加 ?rev=@@hash

var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');
var cleanCss =require('gulp-clean-css');
var del=require('del');
var babel=require('gulp-babel');
var uglify = require('gulp-uglify');
var rename =require('gulp-rename');
var imagemin =require('gulp-imagemin');
var spriter = require('gulp-css-spriter');
var base64 = require('gulp-base64');
var browserSync = require('browser-sync').create();
var reload=browserSync.reload;
var rev  = require('gulp-rev-append');//给URL自动加上版本号
var runSequence=require('run-sequence');
var build={
    basePath:'./build/',
    css:'./build/css',
    images:'./build/images/',
    js:'./build/js/'
};
var src={
    basePath:'./src/',
    css:'./src/css/',
    images:'./src/images/',
    js:'./src/js/',
    less:'./src/less/'
};
/************************开发模式*****************************/
//服务器实时预览刷新
gulp.task('server:dev',function(){
    browserSync.init({
        server:{
            baseDir:src.basePath,
            index:'index.html'
        },
        port:80
    });
    gulp.watch('src/*.html',['html:dev']);
    gulp.watch('src/less/*.less',['less']);
    gulp.watch('src/css/*.css',['css:dev']);
    gulp.watch('src/js/*.js',['js:dev']);
    runSequence(['less'],['css:dev','js:dev']);

});
gulp.task('html:dev',function(){
    gulp.src(['./src/*.html'])
        .pipe(gulp.dest(src.basePath))
        .pipe(reload({stream:true}))
});

gulp.task('less',function(){
    gulp.src(src.less+'*.less')
        .pipe(less())
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream:true}))
});
gulp.task('css:dev',function(){
    gulp.src([src.css+'*.css','!'+src.css+'all.min.css','!'+src.css+'all.css'])
        .pipe(concat('all.css'))
        .pipe(spriter({
            'spriteSheet': src.images+'spritesheet.png',
            'pathToSpriteSheetFromCSS': '../images/spritesheet.png'
        }))
        .pipe(base64())
        .pipe(gulp.dest(src.css))
        .pipe(cleanCss())
        .pipe(rename('all.min.css'))
        .pipe(gulp.dest(src.css))
        .pipe(reload({stream:true}))
});

gulp.task('js:dev',function(){
    gulp.src([src.js+'*.js','!'+src.js+'all.js','!'+'src.js'+'all.min.js'])
        .pipe(babel({
            presets:['es2015']
        }))
        .pipe(concat('all.js'))
        .pipe(gulp.dest(src.js))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest(src.js))
        .pipe(reload({stream:true}))
});

/************************生成模式***************************/
gulp.task('server:product',function(){
    runSequence(['imagesmin','publish:html','publish:css','publish:js'],'rev');
    browserSync.init({
        server:{
            baseDir:build.basePath,
            index:'index.html'
        },
        port:81
    });
});
gulp.task('imagesmin',function(){
    gulp.src(src.images+'*.*')
        .pipe(imagemin())
        .pipe(gulp.dest(build.images))
});
gulp.task('publish:html',function(){
   gulp.src(src.basePath+'*.html')
       .pipe(gulp.dest(build.basePath))
});
gulp.task('publish:css',function(){
    gulp.src(src.css+'all.min.css')
        .pipe(rev())//发布新版本
        .pipe(gulp.dest(build.css))
       
});
gulp.task('publish:js',function(){
    gulp.src(src.js+'all.min.js')
        .pipe(rev())
        .pipe(gulp.dest(build.js))
      
});
gulp.task('del:build',function(){
    del([
        build.basePath
    ])
});
gulp.task('rev',function(){
    return gulp.src(['./rev/**/*.json',build.basePath+'*.html'])
        .pipe(rev())
        .pipe(gulp.dest(build.basePath));
});

相关文章

  • gulp-自动化工具

    创建gulp 基于npm的基础使用gulp，需先更新npm npm install -g npm 全局安装gulp...

  • gulp-自动化构建工具

    GULP是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能 对网站资源进行优化，而且在开发过程...

  • Gulp-前端自动化构建工具

    gulp基于node,自动化构建工具增强前端开发工作流程一些常见的、重复的任务，例如：网页自动刷新、css预处理、...

  • gulp-基于流的自动化构建工具--入门

    gulp安装 全局安装 gulp： 作为项目的开发依赖（devDependencies）安装： 在项目根目录下创建...

  • gulp

    叫做前端自动化构建工具,此类工具还有:grunt前端自动化构建工具 是什么?答: 自动化 less sass ...

  • 自动化测试工具

    Web自动化测试工具：selenium、QTP。性能自动化测试工具：loadrunner、jmeter。接口自动化...

  • Cmake使用语法解析

    Cmake工具 cmake 交叉编译系统生成工具 ctest 自动化测试工具 cpack 自动化打包工具 可...

  • 2019年度十大自动化测试工具

    在测试自动化领域，自动化工具肯定占据了中心位置。 本文总结了顶级测试自动化工具和框架，这些工具和框架有助于组织最好...

  • Hello Gulp!

    说明 之前的学习过grunt 自动化之压缩javascript代码，这次学习另外一种自动化工具。既然也是自动化工具...

  • 常用自动化测试工具分享

    常见自动化测试工具分享 一 Appium AppUI自动化测试 Appium 是一个移动端自动化测试开源工具，支持...

网友评论

    本文标题：gulp-自动化工具

    本文链接：https://www.haomeiwen.com/subject/axqejxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    前端笔记

    关于我们|服务条款|联系我们|gulp-自动化工具|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！