gulp创建与使用

作者: lovelydong | 来源:发表于2017-09-25 20:28 被阅读25次

    npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)

    cnpm只是一个npm的国内镜像

    1.下载nodejs安装包,(去node官网https://nodejs.org)

    2.安装nodejs(如果命令提示权限错误,用sudo管理员权限输入)

    3.安装成功  控制台输入 node -v 查看版本

    4.安装cnpm

    5.检测是否安装成功。

    6.安装gulp

    7.查看gulp版本信息

    8.创建自己的根目录文件夹(project  dist  src),把项目放进去(放到src文件夹里)

    9.进入自己的文件夹

    .当前目录

    ..上级目录

    /根目录

    dir显示目录

    cd :盘名  

    10.本地安装gulp

    11.成功后在根目录下会生成两个文件

    12.通过cnpm init或者npm init来创建package.json文件,把"main": "index.js"入口js改为"main": "gulpfile.js"(创建gulpfile.js文件),最终看到的package.json里有许多许多刚刚修改的代码

    编译 less 或者 sass 文件

    1.安装gulp-less (gulp-sass)插件

    less:   cnpm install --save-dev gulp-less

    sass:  cnpm install --save-dev gulp-sass

    安装成功后会在文件package.json里多了一行gulp-less信息的代码

    2.安装好gulp-less(gulp-sass)后在gulpfile.js中写入如下代码

    //加载gulp模块

    var gulp = require("gulp");

    //加载gulp-less模块

    var test_less = require("gulp-less");

    //gulp任务api

    //语法:

    //gulp.task("任务名称",回调函数)

    //回调函数里是要执行的任务

    gulp.task("test-less",function(){

    gulp.src("src/less/*.less") //src表示要执行任务的所在位置(src下必须有less文件)

    .pipe(test_less())//要执行的任务

    .pipe(gulp.dest("dist/css"));//执行后的任务运行后所要放的位置

    });

    //sass 道理一样

    语法:

    gulp.task("任务名称",回调函数)

    回调函数里是要执行的任务

    src表示要执行任务的所在位置(src下必须有要处理的文件)

    gulp.src("要执行(压缩或编译)的源代码")

    .pipe(模块名称)

    .pipe(gulp.dest("代码执行后所要放的位置"));//执行后的任务运行后所要放的位置

    3.在控制台输入gulp任务名称

    运行后在dist文件夹下生成了一个css文件夹 里面有对应的less编译后的css

    1.应用sass插件上操作  先安装插件-->在gulpfile.js里写内容--->运行

    2.每次等写完less或sass后,再执行一次cmd有时候觉得还是有点麻烦,我们可以使用自动编译任务

    watch(参数1,参数2)方法会自动执行传递的任务

    第一个参数是任务需要监控的路径

    第二个参数是一个数组,里面是要编译的任务名

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

    gulp.watch("src/less/*.less",["test-less"]);

    });

    压缩html

    1.安装gulp-htmlmin

    cnpm install --save-dev gulp-htmlmin

    2.gulpfile.js 里代码

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

    var options = {

    removeComments:true,//清除html注释

    collapseWhitespace:true,//压缩html合并空格

    collapseBooleanAttributes:true,//省略布尔属性的值,===> checked="true"

    removeEmptyAttributes:true,//删除所有空格作属性==> id=""

    removeScriptTypeAttributes:true,//删除<script>的type="text/javascript"的type="text/javascript"

    removeStyleLinkTypeAttributes:true,//删除<style>和<link>的type="text/css"和的type="text/css"

    minifyJS:true,//压缩页面内内嵌式js

    minifyCSS:true//压缩页面内嵌式css

    };

    gulp.src("src/*.html")

    .pipe(htmlmin(options))

    .pipe(gulp.dest("dist"));

    })

    3.控制台输入

    经过压缩,所有的html文件都在一行显示,并且去掉了注释和空格等


    Gulp还可以根据浏览器版本自动处理前缀(自动补齐前缀)

    cnpm install --save-dev  gulp-autoprefixer

    var autoprefixer = require("gulp-autoprefixer");

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

    gulp.src("src/css/*.css")

    .pipe(autoprefixer({

    browsers:['last 2 versions','Android >= 4.0'],

    cascade :true,//是否美化属性 默认值true

    //像这样-webkit-transform:rotate(45deg);

    //transform:rotate(45deg)

    remove:true//是否去掉不必要的前缀 默认为true

    }))

    .pipe(gulp.dest("dest/css/"))

    })




    压缩css  gulp-minify-css或者gulp-clean-css

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

    cnpm install --save-dev gulp-clean-css

    var mincss = require("gulp-minify-css");

    gulp.task("test-minify",function(){

    gulp.src("src/css/*.css")

    .pipe(mincss({

    advanced:false,//是否开启高级优化(合并选择器等),类型:Boolean默认为true

    compatibility:'ie7',//保留ie7及以下兼容写法 类型string

    //默认:'' or '*'[启用兼容模式:'ie7':ie7兼容模式,'ie8':ie8兼容模式'*':ie9+兼容模式]

    keepBreaks:true,//类型:boolean默认false [是否保留换行]

    keepSpecialComments:"*"

    //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加此参数,有可能会删除你的部分前缀

    }))

    .pipe(gulp.dest("dest/css"));

    });


    给刚刚压缩的css里的图片路径加上版本号  防止缓存


    cnpm install gulp-make-css-url-version --save-dev

    //给图片加版本号  防止缓存

    gulp.task("test-url",function () {

    gulp.src("src/css/*.css")

    .pipe(urlpic())

    .pipe(mincss())

    .pipe(gulp.dest("dest/css"))

    })

    压缩js

    cnpm install gulp-uglify --save-dev

    var jsmin = require("gulp-uglify");

    //压缩

    gulp.task("js-min",function () {

    // gulp.src("src/js/*.js")

    gulp.src(["src/js/")

    .pipe(jsmin())

    .pipe(gulp.dest("dest/js"));

    })


    压缩所有js在一个文件里

    cnpm install gulp-concat --save-dev

    var c = require("gulp-concat");

    //压缩所有的js在一个文件里

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

    gulp.src("src/js/*.js")

    .pipe(c("all.js"))

    .pipe(gulp.dest("dest/js"))

    })


    压缩图片

    cnpm install gulp-imagemin --save-dev

    var imgmin = require("gulp-imagemin");

    //压缩图片

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

    gulp.src("src/img/*.{png,jpg,gif,ico}")

    .pipe(imgmin({

    optimizationLevel : 5,//类型:number默认:3取值范围:0-7(优化等级)

    progressive : true,//类型:boolean默认false无损压缩jpg图片

    interlaced : true,//类型:boolean默认:false隔行扫描gif进行渲染

    multipass : true //类型:boolean默认:false多次优化svg直到完全优化

    }))

    .pipe(gulp.dest("dist/img"));

    });


    深度压缩图片

    cnpm install imagemin-pngquant --save-dev

    var imgminq = require("imagemin-pngquant");

    //深度压缩图片

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

    gulp.src("src/img/*.{png,jpg,gif,ico}")

    .pipe(imgmin({

    progressive : true,//类型:boolean默认false无损压缩jpg图片

    svgoPlugins : [{removeViewBox:false}],//不要移除svg的viewbox属性

    use : [imgminq()]//使用pngquant深度压缩png图片的imagemin插件

    }))

    .pipe(gulp.dest("dist/img"));

    });

    相关文章

      网友评论

        本文标题:gulp创建与使用

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