美文网首页
入门级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安装与应用

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开...

  • gulp入门

    安装gulp 安装gulp插件 gulp使用与执行 在目录创建gulpfile.js文件 执行:gulp defa...

  • gulp的简单使用

    gulp使用流程:安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...

  • npm install gulp --save-dev

    全局安装了gulp,项目也安装了gulp 全局安装gulp是为了执行gulp任务 本地安装gulp则是为了调用gu...

  • Gulp笔记

    Gulp.js Gulp.js 是一个构建工具,与Grunt相比,Gulp更加简洁,执行效率更高。 安装Gulp ...

  • angular1配合gulp和bower使用

    一 安装gulp和bower gulp安装: npm install -g gulp bower安装: npm i...

  • gulp学习笔记

    1】npm install gulp -g 全局安装gulp,查看安装是否成功gulp -v(首先安装node,查...

  • 如何使用GULP打包构建工具

    前提:安装node npm 一、安装 1.安装gulp npm install -g gulp 2.检查gulp ...

  • gulp的安装和基本操作

    gulp的安装和基本操作 gulp依赖nodejs,安装gulp需要先安装nodejs(4.0版本以上) node...

  • gulp4.0版入门及常用插件,gulp创建前端项目

    本篇为gulp学习笔记。 gulp安装及创建前端项目 1,先安装node,npm,cnpm 2,全局安装gulp脚...

网友评论

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

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