美文网首页
入门级gulp安装与应用

入门级gulp安装与应用

作者: 苦茶_12138 | 来源:发表于2018-04-19 19:27 被阅读0次

    简介:

    gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,提高了我们写代码的效率。它的功能:1,压缩css,js   2,压缩图   3,编译sass/less  4,编译CoffeeScript, 5,markdown转换为html  等等


    下面简单介绍一下,使用gulp压缩css,js

    1,创建gulp文件夹,创建两个名为app,build的子文件夹(app里存放的是压缩之前的文件,build里存放的是压缩之后的文件)。

    2,全局安装gulp:    sudo cnpm install gulp -g --save  (--save是为了package.json文件中保存gulp安装时的信息)

    3,局部安装gulp     cd +gulp文件夹的路径,进去gulp文件夹,执行   cnpm install gulp --save  (我也不知道为什么全局安装之后,还要局部安装,可能是因为版本支持的问题吧)

    4,安装压缩js的模块--uglp-uglify: sudo cnpm install gulp-uglify --save(建议全局和局部都安装)

    5,安装压缩css的模块--uglp-clean-css:  sudo cnpm install gulp-clean-css --save(同上)

    6,在gulp文件夹下,创建名为gulpfile.js的配置文件

            包括引入模块,创建gulp任务(gulp.src(path)---选择文件,传入参数是文件路径     gulp-dest(path)--输出文件    gulp.pipe()--管道,可以暂时将pipe理解为将操作加入执行队列)

    7,如果没有自动监控,在把需要的文件拖入app文件之后,还需要在终端执行   gulp script / gulp css  命令。如果有了自动监控,直接把js文件拖入app文件夹,build文件夹就可以自动生成压缩好的js文件。(直接拖入css文件,(第一次)不能够直接生成,需要把css文件改动一下,才能自动生成,之后所有的改动,都能直接生成压缩文件)

    相关文章

      网友评论

          本文标题:入门级gulp安装与应用

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