首页  >  文章  >  web前端  >  gulp的入门必知

gulp的入门必知

php中世界最好的语言
php中世界最好的语言原创
2018-03-14 09:17:001337浏览

这次给大家带来gulp的入门必知,使用gulp的必知注意事项有哪些,下面就是实战案例,一起来看一下。

一、全局安装gulp
1、说明:全局安装gulp目的是为了通过她执行gulp任务;
2、安装:命令提示符执行

 npm install gulp -g

3、查看是否正确安装:命令提示符执行

gulp -v

出现版本号即为正确安装。
二、项目中安装gulp

 npm install --save-dev gulp

-注:全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。
三、安装gulp某个模块(以gulp-less为例,编译less文件)

 npm install gulp-less --save-dev

四、新建package.json文件

npm init

根据提示进行填写项目信息。
五、在项目根目录下新建gulpfile.js文件,gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可),文件示例如下:

//导入工具包 require('node_modules里对应模块')var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//定义一个testLess任务(自定义任务名称)gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css});

gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)//gulp.dest(path[, options]) 处理完后文件生成路径

六、选装cnpm
1、说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”;
2、官方网址:http://npm.taobao.org;
3、安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
;  注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎样实现node连接mysql的方法

JS的正则表达式如何使用

以上是gulp的入门必知的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn