zoukankan      html  css  js  c++  java
  • 一个完整的项目中,需要的基本gulp

      一个完整的项目需要使用gulp的多种功能,包括——

    (1)加载各种需要的插件

    var concat=require('gulp');

    var clean=require(''gulp);

    等等。需要的插件放在指定的module文件夹下面,然后再修改文件中修改。

    (2)启动任务和完成部署任务

    我们想要在文件进行操作之前,首先将文件的环境弄好,例如,想把a放在一个目录下,但是这个目录下面有着很多的不需要的文件,所以我们首先需要将这些文件删除——

    gulp.task('cleanTask',function(){

    return gulp.src(dist).pipe(clean())

    })

    注意到里面的dist是一个变量,所以在这之前我们还必须对变量进行声明——

    var dist=__dirname+'/dist'

    代表根目录下的dist文件

    然后执行更新操作:

    gulp.task("default",['release'],function(){

      gulp.run('autoupdateSource')

    });

    执行这个会自动执行,autoupdateSource任务,而执行这个之前,还会先执行release。

    gulp.task("release",function(){

    gulp.run('html');

    gulp.run('transformless');

    gulp.run('img');

    gulp.run('js");

    })

    这个任务会依次执行里面的其他4个任务,目的是将src目录下的所有文件全部拷贝同步到dist文件下面。

    gulp.task("html",function(){

    gulp.src("src/*.html")  //找到原本的路径

    .pipe(minifyHtml())    //对html进行压缩工作,这是需要插件的

    .pipe(gulp.dest(dist))    //目标目录

    .pipe(browserSync.reload({stream:true}));//当监听到html文件发生变动时,执行同步更新操作

    gulp.task('img',function(){

    gulp.src('src/**/*',option)//以option,为根目录,将文件连同文件夹完整搬运过去,若没有这个option,便会导致所有文件全部放在路径下面,失去层次。为此,这个option也需要事前声明

    .pipe(gulp.dest(dest))

    })

    })

    var option = {base: 'src'}; //基准目录从src目录开始

    gulp.task("js", function(){
    gulp.src("src/js/**/*", option).pipe(gulp.dest(dist))
    })

    以及,这个部分重要的less部分——

    gulp.task('transformLess',function(){

    gulp.src('src/style/**/*.less',option)//选择源文件目录

    .pipe(less())    //将文件夹下面的less文件转换成css文件,浏览器不识别less,且这个时候收获的并不是一个css而是多个转化而成的css文件。

    .pipe(autoprefixer())  //自动匹配前缀,轻松解决flex的兼容问题

    .pipe(gulp.dest(dest))  //目的目录,这个操作会将css文件全部输送过去,注意,这里是【多个css文件】

    .pipe(concat('index_all.css'))  //将多个css文件合并

    .pipe(minfy())  //对css进行压缩,一个减小体积,另一个增大读取难度,因为并不是给用户看的

    .pipe(gulp.dest(dist+'/style'))  //转换好的【一个】css文件放在对应目录下

    .pipe(browserSyn.reload({stream:true}))  //和浏览器保持同步更新

    })

    到此为止,我们完成了——文件的搬运和转换和浏览器的同步更新,接下来就是文件自身的同步更新,即——当我们修改工作区间的文件,会同时更改发布区的文件。

    gulp.task('autoUpdateSource',function(){

    gulp.watch('src/style/**/*.less',['transformLess'])  //当目录下的所有less发生变化的时候,执行后面的任务,也就是上面写的同步更新less操作

    gu;p.watch(''src/*.html",[''html"],function(){    //,先执行html任务,当目录下的html文件发生变化的时候,执行后面的函数  

    })

    })

    最后,则是窗口自动启动等问题,这些其实都是默认任务下的东西——

    原来的default任务是这样的

    gulp.task('cleanTask',function(){

    return gulp.src(dist).pipe(clean())

    })

    而事实应该是这个样子的——

    gulp.task('cleanTask',function(){

    if(yargs.s){

    gulp.start('sever')

    }

    if(yargs.w){

    gulp.start('watch');

    }

    还记得我们使用git打开时输入的代码吗?

    node node_modules/gulp/bin/gulp.js

    后面加上-s或者-w就可以执行上面对应的任务——

    node node_modules/gulp/bin/gulp.js -s

    gulp.task('server',function(){

    yargs.p=yargs.p||8080;     //服务器端口

    broswerSyn.init({

    server:{

    baseDir:"./dist"      //文件打开路径,意味着打开8080端口下的dist文件夹

    },

    port:yars.p,

    startPath:'./'      //最终打开文件路径,在上述路径下面添加这里的路径,寻找index.html打开

    })

    })

    至此,配置文件全部结束,完结撒花——————

    我会将全部代码放在后面的。

    return gulp.src(dist).pipe(clean())

    })

  • 相关阅读:
    团队作业(二):项目选题
    今天准备正式开博了!专注于Silverlight!
    ORA01033:ORACLE initialization or shutdown in progress 错误的解决办法
    寻找正在应用和准备学习XNAor3D技术的志同道合的伙伴,大家能够互帮互助,共同探讨,最好能够组成较固定的小团队!
    TNS: could not resolve the connect identifier specified
    今天连接字符串出现了“ORA01008: 并非所有变量都已绑定”错误
    选择HttpHandler还是HttpModule?
    jQuerymenuaim.js
    MVP解读
    揭秘Amazon反应速度超快的下拉菜单
  • 原文地址:https://www.cnblogs.com/thestudy/p/5612138.html
Copyright © 2011-2022 走看看