以这次学习 gulp 为契机来同时了解和学习 node 相关的知识和概念,比如 npm,package.json 等,为以后学习 node 打好基础。
npm 查看模块 安装模块 卸载模块 更新模块 搜索模块 npm 配置 查看版本 帮助 package 创建 package.json package.json 的标准格式 依赖下载 gulp 安装 gulp gulpAPI src dest task watch gulpfile 使用 sublime 运行 gulp 最后
npm (Node Package Manager) 它是 Node 的包管理器与分发工具,又因为 Node 是基于 JavaScript 的语法格式,所以又被称之为 JavaScript 的包管理器。 npm 用于管理 Node 的模块以及插件,例如模块或者插件的安装,更新,搜索,卸载等。 npm 默认与 Node 绑定在一起的,所以安装 Node,自然就安装了 npm。 npm 的官网: https://www.npmjs.com/
PS: npm 安装插件过程:从 http://registry.npmjs.org 下载对应的插件包(该网站服务器位于国外,所以经常下载缓慢或出现异常),因此建议设置镜像站点或者是使用淘宝提供的镜像包管理器
- cnpm
列出当前目录的包
- npm list
列出全局安装的包
- npm list - g
精简信息显示
- npm list - g--depth = 0
本地安装
- npm install gulp--save - dev
--save: 将该模配置信息保存至
文件中的 Dependencies 属性内。 -dev : 指明将配置信息保存至
- package.json
文件中的的
- package.json
内。
- Devdependencies
全局安装
- npm install gulp - g
安装指定版本号的模块
- npm install rimraf@2.6.1
总的来说,使用 npm 安装一个模块或插件,其格式如下:
- npm install < packageName[@version] > [ - g][--save - dev]
卸载本地模块
- npm uninstall rimraf
卸载全局模块
- npm uninstall gulp - g
删除模块并卸载配置信息
- npm uninstall rimraf--save - dev
总的来说,卸载模块的格式:
- npm unistall < packageName[@version] > [ - g][--save - dev]
模块的更新与模块的安装和卸载在使用上格式相同
- npm update[packageName][ - g][--save - dev]
如果你要更新所有的插件的话
- npm update[--save - dev]
当我们发布一个自己创建的模块或包时,就要去搜索远程仓库是否已经有存在相关的命名。
- npm search < packageName >
如果想查看当前 npm 的配置参数,可以使用一下命令
- npm config list - l
通过
命令也可以自定义某些 npm 的功能参数。 其中常用的有,重新设置代理,重新设置模块的下载地址。 例如因为公司的防火墙原因,无法完成任何模块的安装,这个时候设置代理可以解决
- config
- npm config set proxy = http: //proxy.com
又如国内的网络环境问题,某官方的 IP 可能被和谐了,幸好国内有好心人,搭建了镜像,此时我们简单设置镜像
- npm config set registry = "http://r.cnpmjs.org"
最后也可以安装的淘宝镜像包管理器
- npm install cnpm - g--registry = https: //registry.npm.taobao.org
- npm - v
可以通过 help 来查看相关命令的文档
- npm help list
是一个 JSON 文件,它既可以用于说明当前模块的相关配置信息,也可以指明我们安装时所需要的依赖模块。
- package.json
- npm init
通过引导的方式在当前模块下创建
文件。
- package.
- npm init--yes
如果不想根据引导创建
也可以使用该命令直接创建。
- package.json
一个标准的
文件内容如下:
- package.json
- {
- "name": "st",
- "version": "1.0.1",
- "description": "",
- "main": "gulpfile.js",
- "dependencies": {
- "gulp": "^3.9.1"
- },
- "devDependencies": {
- "rimraf": "2.6.1"
- },
- "scripts": {
- "preinstall": "echo here it comes!",
- "postinstall": "echo there it goes!",
- "start": "node index.js",
- "test": "tap test/*.js"
- },
- "keywords": [],
- "author": {
- "name": "gtshen",
- "email": "sgt_ah@163.com"
- },
- "contributors": [{
- "name": "",
- "email": ""
- },
- {
- "name": "",
- "email": ""
- },
- {
- "name": "",
- "email": ""
- }],
- "engines": {
- "node": "0.10.x"
- },
- "license": "MIT",
- "repository": {
- "type": "git",
- "url": "git+https://github.com/shenguotao2015/st.git"
- },
- "bugs": {
- "url": "",
- "email": ""
- },
- "homepage": "http://st.cn"
- }
name name 用于定义模块或者包名,它是 package.json 中非常重要的属性之一。 如果你向 npm 提交这个模块时,你必须保证 name 的名称是唯一的。
version 用于设置模块的版本号。在 package.json 中最重要的就是 name 和 version 字段了。
description 描述内容,值为一个字符串。用于方便
进行搜索。
- npm search
keywords 关键字。值可以为一个字符串也可以是一个数组。用于方便
进行搜索。
- npm search
- keywords: 'keywords content'keywords: ['k1', 'k2']
homepage 项目官网的 url。
目前在我们的项目目录中只安装了两个模块,不过包的数量会增长的非常快。手动安装依赖是非常不明智的,所以可以在项目目录中用 package.json 文件来管理它们。通过 nmp init 命令可以创建。
bugs 用于指明反馈 bug 的方式。
license 许可证,用于说明该模块受到何种保护以及授权人具有哪些权利。 关于选择何种许可证,可以见下图:
author 作者
contributors 协助开发的相关人员,值是一个数组。
repository 指定一个代码存放地址。
main 用于指定该模块的入口的文件,这个入口文件一般都是模块根目录下的 js 文件,例如:
。 后期,在我们使用该模块时,例如:
- index.js
就是加载的这个
- require('st')
文件。
- index.js
- {
- "name": "st",
- "version": "1.0.1",
- "main": "index.js"
- }
engines engines 用于说明该模块需要依赖的 node 版本。
scripts scripts 可以为当前模块自定义一些脚步动作或命令。
- {
- "scripts": {
- "preinstall": "echo here it comes!",
- "postinstall": "echo there it goes!",
- "start": "node index.js",
- "test": "tap test/*.js"
- }
- }
如上所示,现在就可以在该模块内执行如下命令
- node postinstall node start node test
dependencies dependencies 是一个对象,用于声明该模块所依赖的模块列表,其中 key 是模块的名称,value 则是模块的版本。 其中版本常用的书写格式有:
- version精确匹配版本 > version必须大于某个版本 >= version大于等于 < version小于 <= versionversion小于~version "约等于",具体规则详见semver文档 ^ version "兼容版本"具体规则详见semver文档1.2.x仅一点二点几的版本range1 || range2范围1和范围2满足任意一个都行
- {
- "dependencies": {
- "foo": "3.0.1",
- "baz": ">1.0.2 <=2.3.4",
- "boo": "2.0.1",
- "qux": "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0",
- "til": "~1.2",
- "two": "2.x"
- }
- }
devDependencies 它的功能与
相同。 不同的是
- dependencies
只用于声明开发环境的依赖列表,而
- devDependencies
则是用于声明正式环境的依赖列表。 如果有人想要下载并使用你的模块,也许他们并不希望或需要下载一些你在开发过程中使用的额外的测试或者文档框架。在这种情况下,最好的方法是把这些依赖添加到 devDependencies 属性的对象中。
- dependencies
总的来说,package.json 中用于保存模块的配置信息,其中最重要的就是
与
- name
这两者的组合用于唯一标示该模块。其次,如果模块有依赖其它模块的情形,则可以按照所依赖的类型,比如开发环境与正式环境的不同有区分的将信息写入
- version
和
- devDependencies
中。 同理,如果有人使用到了你的模块,那么他在本地执行:
- dependencies
- npm install
则可以直接将
中的依赖下载到本地,如果在正式环境,他可以使用
- devDependencies
- npm install - production
将
中的信息下载到正式环境中。
- dependencies
1. 简介 gulp 属于前段自动化工具中的构建工具,我们使用 gulp 主要用于资源的压缩合并与优化,除此之外 gulp 还具有一些很实用的功能,比如 sass 的编译、本地 WEB 服务的搭建、浏览器自动刷新以及文件的更改监听。
2. 概念 gulp 的核心概念是 "流"。你可以理解成类似于一个流水线作业,文件流在被管道方法 (pipe) 接收后可以被其回调函数进行操作处理,操作完成后,可以依次被下个管道方法接收处理,因此管道方法就好比是每个作业的环节。 gulp 这种 "流" 的操作相比
等其它构建工具,要大大的减少了频繁的
- grunt
操作,并且在代码的书写上也可以用与
- I/O
相同的链式写法。
- Jquery
3. 特点 易于使用
- 通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理。
构建快速
- 利用Node.js流的威力,你可以快速构建项目并减少频繁的IO操作。
易于学习
- 通过最少的API,掌握gulp毫不费力,构建工作尽在掌握:如同一系列流管道。
插件高质
- gulp严格的插件指南确保插件如你期望的那样简洁高质得工作。
4. 准备 在使用 gulp 之前,我们一般会在本地新建好要开发项目的目录。 新建好项目后,在该项目的根目录,我们可以自己选择是否要创建
文件,如果你打算将自己配置好的 gulp 功能与它人分享,那么便需要建立该文件。通过
- package.json
直接创建一个
- npm init --yes
的文件。然后我们编辑好基本的
- package.json
与
- name
既可。 这里我贴出自己平常开发时的项目目录结构:
- version
- | -productName | -assets | -css | -js | -images | -index.html | -productName | -css | -js | -images | -index.html | -node_modues | -gulpfile.js | -package.json
其中
是我们开发时使用的目录,而项目里面相同的
- assets
则是我们通过 gulp 编译的目录或者是叫分发目录。
- productName
再贴出
文件的内容
- package.json
- {
- "name": "productName",
- "version": "v1.0.0"
- }
gulp 的安装要经过两个步骤:
首先全局安装:
- npm install - g
此时 gulp 便会被安装到
中。 想验证是否安装完成,在终端中执行下面的命令:
- "C:\\Users\\Administrator\\AppData\\Roaming\\npm\gulp
- gulp - v
看看有没有打印出对应的信息,如果有,说明 gulp 安装成了,现在可以调用 gulp 的命令。 最后,我们再到自己项目中,然后本地安装 gulp
- cd d: /work/gulp npm install gulp--save - dev
本地此时便会建立一个
的文件夹,文件夹里面存放的就是 gulp 本身以及它所依赖的其它模块。
- node_modules
gulp 的 API 很少, 所以我们可以很轻松快速的掌握 gulp 的基本用法。
格式: gulp.src(sources,options) 功能:读取源文件,并默认将文件以流的形式载入,供管道方法 (pipe) 使用加工。 说明: sources: 资源文件的路径,可以是字符串,也可以是包含多个资源文件的数组。 示例:
- gulp.src('assets/**/*.js') gulp.src(['assets/**/*.js', '!assets/js/index.js']);
仔细的你想必已经发现了上面的 url 值,有
等符号,这些符号叫做 "通配符",在
- *,!
时代就已经沿用在文件管理系统中,其功能与含义与正则也很相似,具体的含义与功能如下:
- uninx
options:
方法的附加选项。值是一个对象,具体参数如下:
- .src()
属性 | 默认值 | 说明 |
---|---|---|
buffer | false | 值为 false 表示当前的文件以流的形式载入,如果为 true,则以 buffer 的方式存储 |
read | true | 是否读取文件,如果值为 false 则不读取资源文件,file.contents 返回 null |
base | string | 用于设置与 相结合的输出目录。 |
注意:
与
- buffer
的文件表现方式有很大的不同,
- stream
是在
- stream
的基础上再次封装,它不要求一次性的读取与装载文件,而是以流的形式处理,而
- buffer
则类似于一种对象结构的数组,用于存储当前文件的所有二进制数据,当然,这些知识理论都是属于 nodeJS 的,对于我们这些非后台的 gulp 使用者,应当认识到 gulp 的插件在对文件的处理上,分为
- buffer
与
- buffer
两种形式既可。
- stream
base 的值用于与
结合使用确定输出文件的位置,我们知道
- gulp.dest()
用于输入文件,而
- gulp.src
用于输出文件,在默认状态下,base 的值就是
- gulp.dest
中资源文件路径中通配符之前的部分,当我们输出文件时
- gulp.src
dest 就会让 path 去覆盖 base 的值,这样便能确定输出文件的位置了。 可见示例: 如果现在
- gulp.dest(path)
目录下有一个 index.js 文件。那么:
- script/js/
- gulp.src('script/js/*.js') // 此时base的值默认的就是 script/js/
- .pipe(gulp.dest('build')) // 输出时,build会覆盖base,那么输出的位置就是 build/index.js
- //效果如下相同
- gulp.src('script/**/*.js', {
- 'base': 'script/js/'
- }).pipe(gulp.dest('build'))
如果是这样呢?
- gulp.src('script/**/*.js', {
- 'base': 'script'
- }) //此时base的值为script
- .pipe(gulp.dest('build')) //当用 build 覆盖 base时,输出的位置也就是 build/js/index.js
格式: gulp.dest(path,options) 功能: 将管道 (pipe) 中的文件流以文件的形式重新写入到指定的目录。如果该目录不存在,则会创建目录 说明: path:要输出的路径。值可以是单纯的路径 url,也可以是一个处理函数(function) options:
方法的的选项参数,值是一个对象 object。
- gulp.dest()
属性 | 默认值 | 说明 |
---|---|---|
cwd | string | 输出目录的 cwd 参数,只在所给的输出目录是相对路径时候有效。 |
mode | string:0777 | 八进制权限字符,用以定义所有在输出目录中所创建的目录的权限。 |
格式: gulp.task(taskName[,deps],fn) 功能: 创建 gulp 任务,执行相应功能。gulp 创建的任务,可以在命令行中使用
形式执行。如果 taskName 为 default,那么则可以直接运行
- gulp taskName
。 说明: taskName: 任务名称。 deps:一个包含任务列表的数组,这些任务会在你当前任务运行之前完成。 fn:任务的处理函数。
- gulp
格式: gulp.watch(sources,callback) 作用: 监视文件,并且可以在文件发生改动时候做一些事情。 说明: sources:文件文件的路径 url,取值可以是 String,也可以是保存多个资源文件路径的数组 Array。其功能就是监控指定文件的更改。 callback: 文件更改时执行的操作,值可以是预先定义好的 task,也可以时自定功能的 function。
- gulp.watch(config.src + '/**/*.+(scss|sass|html|css|js)', ['build']);
里面存储的就是执行 gulp 时运行的主要逻辑。
- gulpfile.js
sass 编译
- var gulp = require(gulp),
- sass = require('gulp-sass');
- gulp.task('sass',
- function() {
- return gulp.src('assets/**/*.+(scss|sass)').pipe(sass({
- "outputStyle": "expanded"
- })).pipe(gulp.dest('gulp-test'))
- });
web 服务器与自动刷新
- var gulp = require('gulp'),
- browserSync = require('browser-sync');
- gulp.task('browserSync',
- function() {
- browserSync({
- "server": {
- "baseDir": config.dest
- }
- });
- });
- gulp.task('reload',
- function() {
- browserSync.reload();
- });
监听文件改动
- gulp.task('watch',
- function() {
- gulp.watch('assets/**/*.+(scss|sass)', ['sass']);
- })
CSS 压缩
- var gulp = require('gulp'),
- cleanCSS = require('gulp-clean-css');
- gulp.task('cssMini',
- function() {
- return gulp.src('assets/css/*.css').pipe(cleanCSS({
- advanced: false,
- compatibility: 'ie7',
- keepBreaks: false,
- keepSpecialComments: '*'
- })).pipe(gulp.dest('gulp-test/css/'))
- });
说明:
advanced: false, // 类型:Boolean 默认:true [是否开启高级优化(合并选择器等)] compatibility: 'ie7', // 保留 ie7 及以下兼容写法 类型:String 默认:''or'*'[启用兼容模式;'ie7':IE7 兼容模式,'ie8':IE8 兼容模式,'*':IE9 + 兼容模式] keepBreaks: false, // 类型:Boolean 默认:false [是否保留换行] keepSpecialComments: '*' // 保留所有特殊前缀当你用 autoprefixer 生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
JS 压缩
- var gulp = require('gulp'),
- uglify = require('gulp-uglify');
- gulp.task('jsMini',
- function() {
- return gulp.src('assets/js/*.js').pipe(uglify({
- mangle: true,
- //类型:Boolean 默认:true 是否修改变量名
- compress: true,
- //类型:Boolean 默认:true 是否完全压缩
- preserveComments: 'all' //保留所有注释
- })).pipe(gulp.dest('gulp-test/js/'))
- })
说明: mangle: 用于选择是否压缩变量名,如果为 false 则不压缩变量名,默认值为 true。它也可以接收一个对象作为值,来自动以过滤那些指定的变量名。
- {"mangle": {except: ['require' ,'exports' ,'module' ,'$']}}
图片压缩优化
- var gulp = require('gulp'),
- imagemin = require('gulp-imagemin'),
- cache = require('gulp-cache');
- gulp.task('imageMini',
- function() {
- return gulp.src('assets/images/*.+(jpg|png|svg|gif)').pipe(cache(imagemin())).pipe(gulp.dest('gulp-test/images/'))
- });
打版本号
- var gulp = require('gulp'),
- rev = require('gulp-rev');
- gulp.task('rev',
- function() {
- return gulp.src('assets/**/*.*').pipe(rev()).pipe(gulp.dest('gulp-test')).pipe(rev.manifest()).pipe(gulp.dest('gulp-test/rev/')) //生成配置文件,用于记录原文件与打版本后的对应关系,方便在以后再html中进行连接的替换。
- })
合并、压缩、打版本号、替换链接
- var gulp = require('gulp'),
- concat = require('gulp-concat'),
- rev = require('gulp-rev'),
- revCollector = require('gulp-rev-collector'),
- notify = require('gulp-notify'),
- cleanCSS = require('gulp-clean-css');
- //合并、压缩、打版本号
- gulp.task('concat',
- function() {
- return gulp.src(['assets/css/index.css', 'assets/css/style.css']).pipe(concat('main.min.css')) //合并为main.min.css
- .pipe(cleanCSS()) //压缩mainCSS
- .pipe(rev({
- 'replaceReved': true,
- 'dirReplacements': {
- 'css': 'css',
- 'js': 'js',
- 'img': 'img'
- }
- })) //为main.min.css 打版本
- .pipe(gulp.dest('gulp-test/css/')) //生成到指定目录
- .pipe(rev.manifest()) //创建rev配置文件
- .pipe(gulp.dest('gulp-test/css/rev/')) //将配置文件生成到指定目录。
- .pipe(notify({
- message: 'concat minicss rev complate'
- }))
- });
- //替换资源路径
- gulp.task('revCollector',
- function() {
- return gulp.src(['assets/*.html', 'gulp-test/css/rev/*.json']) //指定要替换连接的文件以及对应的配置文件。
- .pipe(revCollector()) //开始替换
- .pipe(gulp.dest('gulp-test')) //重新生成替换好练级后的文件。
- });
说明: replaceReved:设置 replaceReved 标识, 用来说明模板中已经被替换的文件是否还能再被替换, 默认是 false dirReplacements:标识目录替换的集合, 因为 gulp-rev 创建的 manifest 文件不包含任何目录信息, 上面的例子将得到下面的替换结果
- "/css/style.css" = >"/dist/css/style-1d87bebe.css""/js/script1.js" = >"/dist/script1-61e0be79.js""cdn/image.gif" = >"//cdn8.example.dot/img/image-35c3af8134.gif"
实际上就是将你指定的目录信息与
文件中的对应信息进行拼接,实现可自定义目录。
- manifest.json
替换链接 - 注释法 此种方式实现的功能与上面相同,但是它有一个特点,那就是无需生成
的对应文件,也不需要要是用
- manifest.json
去更改文件中的资源名称或者是路径,但是却需要开发者在 html 或者其他页面文件中,通过特定的注释格式,去说明合并的类型以及要合并到那个文件中。
- collector
其注释格式如下:
- <!--build:<type> path/fileName -->
- ...
- <!--endbuild-->
其中
就是编译的类型,主要有 css,js,而
- type
则是路径参数,
- path
就是最终合并到的新文件。 具体示例:
- fileName
- <!--build:css css/main.min.css -->
- <link type="stylesheet" href="a.css" />
- <link type="stylesheet" href="b.css" />
- <link type="stylesheet" href="c.css" />
- <!--endbuild-->
- <!--build:js js/main.min.js -->
- <script src="a.js">
- </script>
- <script src="b.js">
- </script>
- <script src="c.js">
- </script>
- <!--endbuild-->
具体的 gulp 代码:
- var gulp = require('gulp'),
- useref = require('gulp-useref'),
- gulpIf = require('gulp-if'),
- cleanCSS = require('gulp-clean-css'),
- uglify = require('gulp-uglify');
- gulp.task('useref',
- function() {
- return gulp.src('assets/**/*.html').pipe(useref()).pipe(gulpIf('*.css', cleanCSS())).pipe(gulpIf('*.js', uglify())).pipe(gulp.dest('gulp-test'))
- });
那么,如果你只想压缩,而并不想合并,那该怎么办呢? 其实很简单
- //只压缩不合并
- < !--build: css css / a.min.css--><link type = "stylesheet"href = "a.css" / ><!--endbuild-->
- //即压缩也合并
- < !--build: css css / a.min.css--><link type = "stylesheet"href = "b.css" / ><link type = "stylesheet"href = "c.css" / ><!--endbuild-->
删除 gulp 的删除一般用于当我们生成新的文件时,去清除旧的文件。 实际上再我们重新生成文件时,基本上都可以自动覆盖。
- gulp.task('clean',
- function() {
- del(['gulp-test/images/', '!gulp-test/css/'])
- })
定义运行队列 gulp 的任务都是异步执行的,一般我们无法控制执行顺序,但是通过使用 requence 模块,我们就可以很轻易的控制 gulp 任务的执行顺序。
- var gulp = require('gulp'),
- notify = require('gulp-notify'),
- sequence = require('run-sequenc');
- gulp.task('task1',
- function() {
- notify({
- message: 'task - one'
- })
- }) gulp.task('task2',
- function() {
- notify({
- message: 'task - two'
- })
- }) gulp.task('task3',
- function() {
- notify({
- message: 'task - thr'
- })
- }) gulp.task('sequence',
- function() {
- sequence('task1', 'task2', 'task3');
- })
打通管道 我们知道 gulp 中文件以 "流" 的形式在管道 (pipe) 中传输,如果有个需求需要读取文件的相关信息以及对文件进行某些操作,那么打通管道,读取文件就是我们必须要进行的工作。 之前我们有一个插件
它也有类似的功能,但是它已经被固化,只能用来判断格式,而这里我们可以通过
- gulp-if
这个插件可以实现更自由化的管道操作。
- gulp-tap
- var gulp = require('gulp'),
- tap = require('gulp-tap'),
- path = require('path');
- gulp.task('tap',
- function() {
- gulp.src('assets/**/*.html').pipe(tap(function(file, t) {
- console.log(path.extname(file.path)); //文件扩展名
- console.log(path.basename(file.path)); //文件名。
- }))
- })
在平常开发中,如果我们一边在编辑器中编写代码,另一边还要打开终端(命令行工具)然后去执行 gulp 任务,这种方式效率肯定是很低的,使用上也有断开感,为了提高效率以及连续性,我们可以直接在编辑器中运行 gulp 任务。这里以
为例来加以说明。
- sublime
首先,打开 sublime 快捷键
选择
- ctrl+shift+p
然后输入
- install package
安装 Gulp 插件。 接着,
- Gulp
在其中找到
- 首选项 - 浏览器插件目录 - Gulp
文件,将以下内容拷贝覆盖进去
- Side Bar.sublime-menu
- [{
- "caption": "Gulp",
- "children": [{
- "caption": "运行默认的任务",
- "command": "gulp",
- "args": {
- "task_name": "default",
- "paths": []
- }
- },
- {
- "caption": "运行任意的任务",
- "command": "gulp_arbitrary",
- "args": {
- "paths": []
- }
- },
- {
- "caption": "运行最后的任务",
- "command": "gulp_last",
- "args": {
- "paths": []
- }
- },
- {
- "caption": "-"
- },
- {
- "caption": "列出要运行的任务",
- "command": "gulp",
- "args": {
- "paths": []
- }
- },
- {
- "caption": "删除缓存",
- "command": "gulp_delete_cache",
- "args": {
- "paths": []
- }
- },
- {
- "caption": "结束所有的gulp任务",
- "command": "gulp_kill"
- },
- {
- "caption": "结束特定的gulp任务",
- "command": "gulp_kill_task"
- },
- {
- "caption": "-"
- },
- {
- "caption": "插件列表",
- "command": "gulp_plugins"
- }]
- }]
这样便可以汉化 gulp 的侧边栏菜单。
最后,打开我们本地具有 gulp 的项目目录,在 sublime 的侧边栏找到
文件,并对其右击选择
- gulpfile.js
选项,在其中便可以选择执行 gulp 相应的命令。 其中常用的选项有:
- Gulp
- 运行默认的任务:运行
- default任务运行任意的任务:自己输入相应的gulp任务。列出要运行的任务:手动选择要执行的gulp任务。插件列表:可以看到与gulp相关的插件模块。
使用 sublime 执行 gulp 任务,一定要确保具有
环境,其次就是本地存在
- nodeJS
文件。 如果你感觉右击很麻烦,也可以自己定义快捷键。 依次打开
- gulpfile.js
-
- 首选项
-
- 快捷键设置
,在其中放入以下配置代码。
- Default (Windows).sublime-keymap
- {
- "keys": ["ctrl+alt+p"],
- "command": "gulp_plugins"
- },
- {
- "keys": ["ctrl+alt+o"],
- "command": "gulp",
- "args": {
- "paths": []
- }
- },
- {
- "keys": ["ctrl+alt+;"],
- "command": "gulp_last",
- "args": {
- "paths": []
- }
- },
- {
- "keys": ["ctrl+alt+h"],
- "command": "gulp_delete_cache",
- "args": {
- "paths": []
- }
- },
- {
- "keys": ["ctrl+alt+l"],
- "command": "gulp_arbitrary",
- "args": {
- "paths": []
- }
- },
- {
- "keys": ["ctrl+alt+k"],
- "command": "gulp_kill"
- },
- {
- "keys": ["ctrl+alt+j"],
- "command": "gulp",
- "args": {
- "task_name": "default",
- "paths": []
- }
- },
目前 gulp 在公司里面也刚开始应用,这次学习也只是掌握了 gulp 的常用功能,虽然可以满足基本的工作需求,但是我个人感觉还缺少了一个统一可配置的
文件,我打算等以后随着 gulp 使用的更频繁也更为熟练的时候,自己封装一个可以统一应用在任何工作上的 gulpfile 文件。
- gulpfile.js
参考资料:
https://www.w3ctrain.com/2015/12/22/gulp-for-beginners/ http://www.cnblogs.com/fengyuqing/p/5332112.html http://jingyan.baidu.com/article/48206aeaa42b63216bd6b372.html
来源: http://www.cnblogs.com/HCJJ/p/6703889.html