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())

    })

  • 相关阅读:
    1093 Count PAT's(25 分)
    1089 Insert or Merge(25 分)
    1088 Rational Arithmetic(20 分)
    1081 Rational Sum(20 分)
    1069 The Black Hole of Numbers(20 分)
    1059 Prime Factors(25 分)
    1050 String Subtraction (20)
    根据生日计算员工年龄
    动态获取当前日期和时间
    对计数结果进行4舍5入
  • 原文地址:https://www.cnblogs.com/thestudy/p/5612138.html
Copyright © 2011-2022 走看看