zoukankan      html  css  js  c++  java
  • 教你如何正确使用gulp

    容开始---

    今天上网了解了一下gulp自动化构建工具,他是基于node.js的,在node下面有一个强大的包管理器,你可以用它安装许多好用的插件,比如自动编译sass或者是less,压缩你的代码等等。。那么gulp究竟该如何使用呢,下面我将引导你们步入你们学习gulp的第一步:

    使用gulp教程:(-->后面的内容是在命令提示符中输入的)
    一:在电脑上安装node.js运行环境
    二:安装cnpm镜像 -->npm install cnpm -g --registry=https://registry.npm.taobao.org(node.js有一个强大的包管理器npm,用于node的插件管理,由于服务器是国外的,安装插件的速度会很慢,所以先用npm安装cnpm,这是一个完整 npmjs.org镜像,用法与npm相同)
    三:安装全局的cnpm -->cnpm install --global gulp
    四:进入项目的根目录,本地安装gulp -->cnpm install --save-dev gulp
    五:在项目的根目录下 -->cnpm init(初始化)
    六:本地安装gulp插件 -->cnpm install --save-dev gulp-less(安装gulp-less插件)
    七:在根目录下创建一个名为gulpfile的js文件,并将gulp插件配置写入(先注入依赖环境,导入工具包,代码var gulp = require('gulp'));

    八:设置实时监听,自动化构建 -->gulp watch

    接下来就可以任意安装你想要使用的插件了,记得先在命令提示符中安装插件(具体看第六步),然后在你的gulpfile文件中声明插件变量(var less = require('gulp-less')),再调用gulp的task方法定义该插件得的使用(

    gulp.task('css',function(){  //这里的第一个参数为任务名(自己取的,之后执行task方法的时候使用的就是这个名字)
    gulp.src('src/less/index.less') //需要处理的文件路径
    .pipe(less())//执行方法
    .pipe(gulp.dest('lib/css')); //处理后的文件输出路径
    })

    ),最后不要忘了执行你定义好的功能(gulp.task('default',['css']); //执行任务),这一套下来基本配置就结束了,但每次改变你的代码都要在命令提示符中输入gulp指令,这个时候就要使用gulp的本命功能了,自动化执行任务(

    gulp.task('watch',function(){
    gulp.watch('src/less/index.less',['css']) //实时监听变化-->命令提示符中输入gulp watch
    }) //第一个参数为需要处理的文件路径,第二个为该任务名

    到这里gulp的基本使用方法就简单地说明完毕了,由于本人也是刚接触gulp,整理得也很仓促,大家如果想了解更多的gulp插件的话,请上gulp的官网  http://www.gulpjs.com.cn/

                                                          一步一个脚印,共同见证彼此,我是你们的朋友,吴超!

  • 相关阅读:
    浅谈JS严格模式
    浅谈自记忆函数
    浅谈padding
    JS在if中的强制类型转换
    JS正则表达式从入门到入土(10)—— 字符串对象方法
    JS正则表达式从入门到入土(9)—— test方法以及它的那些坑
    JS正则表达式从入门到入土(8)—— REGEXP对象属性
    从零开始的vue学习笔记(四)
    从零开始的vue学习笔记(三)
    从零开始的vue学习笔记(二)
  • 原文地址:https://www.cnblogs.com/chao-insist/p/6103325.html
Copyright © 2011-2022 走看看