美文网首页
安装gulp以及简单的使用

安装gulp以及简单的使用

作者: 五锅锅 | 来源:发表于2017-03-16 16:59 被阅读811次

    好记性不如烂笔头,很多东西久了不用还是会易忘,特别是技术性的东西或是繁琐的操作

    gulp 是前端的构建工具,配置不繁琐,而且学起来也容易。
    安装gulp之前确保你安装nodejs,如果没安装可以参考这篇文章

    安装gulp

    $ npm install gulp -g

    -g代表全局安装 如果是mac,加上sudo 因为mac全局安装需要权限还需要输入密码,如下

    $ sudo npm install gulp -g

    安装成功之后,接下来我们需要开始使用gulp了,一步一步操作

    • 新建一个文件夹demo
    1. 进入demo目录:

    $ cd demo

    1. 初始化一下npm创建package.josn:

    $ npm init

    一路回车键

    目前demo的目录
    • 下来gulp登场:

    npm install gulp --save-dev

    你肯定有疑问,为什么还要再安装一下?前面不是安装过了吗?因每个单独的项目要使用gulp都需要再安装一次。--save-dev是把gulp写进package.josn的依赖中

    安装gulp中 安装gulp成功之后目录多了一个node_modules文件夹
    • gulp有集成很多功能,比如gulp-less、 gulp-cssmin、 gulp-uglify、 gulp-connect、 gulp-concat 、gulp-imagemin、 gulp-clean。常用有less转css的gulp-less、css压缩体积的gulp-cssmin、js压缩体积的gulp-uglify、也可以用图片压缩gulp-imagemin。安装全部命令:

    $ npm install gulp-less gulp-cssmin gulp-uglify gulp-connect gulp-concat gulp-imagemin gulp-clean open --save-dev

    压缩命令执行
    • 新建文件夹src ,为什么必须要是src?因为gulpfile.js文件指定src,你也可以修改配置文件的文件夹名。
    • 进入src文件夹新建demo.html 和js文件夹,在里面随便写点什么,
    src目录
    • 最后一步了:终端运行命令

    $ gulp

    然后在index.html编辑代码看看浏览器有啥变化没?

    使用bower下载第三方类库

    1. 检测是否安装 $ bower -v
    2. 如果没有则安装$ npm install bower -g
    3. 在demo目录下 $ bower install xxx 比如下载angular-ui-router $ bower install angular-ui-router
    4. 搞定。
    完成

    相关文章

      网友评论

          本文标题:安装gulp以及简单的使用

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