使用grave的教程 这是一个基于Node.js的JavaScript项目构建工具

Npm安装大口-保存-开发什么是大口？grave是新一代前端项目构建工具。您可以使用grave及其插件来编译您的项目代码(less，sass)，压缩您的js和css代码，甚至压缩您的图片。grave只有几个API，所以非常容易学习。大口使用流来处理内容。Node催生了很多自动化工具，比如Bower、Yeoman、Grunt等等。

grave和grunt的异同很容易使用：代码比配置策略更好，grave使简单的事情变得简单，复杂的任务变得易于管理。高效：通过使用Node.js强大的流，不需要将中间文件写入磁盘，可以更快地完成构建。高质量：glaw严格的插件指导方针确保插件简单，并如您所期望的那样工作。易学：通过最小化API，可以在短时间内学会大口。建筑工程和你想象的一样：它是一系列的流动管道。gough是用node.js编写的，所以你需要在你的终端上安装npm。Npm是node.js的包管理器，所以先在你的电脑上安装node.js。

大口安装命令

sudo NPM install-g gung在根目录中创建新的package.json文件。

Npm初始化。安装大口包。

安装完成后，再次输入grave-v检查版本号，下图显示成功：

安装插件安装常用插件：

编译sass(gull-ruby-sass)自动添加css前缀(gull-autoprefixer)压缩CSS(gull-minify-CSS)检查js代码(gull-js hint)合并js文件(gull-concat)压缩js代码(gull-uglify)压缩图片(gull-imag)。Emin)自动刷新页面(glaw-livereload)图片缓存，只在图片被替换时压缩它(glaw-cache)更改提醒(glaw-notify)清除文件(del)要安装这些插件，需要运行以下命令：

复制代码如下：

$ npm安装大口-ruby-sass大口-autoprefixer大口-minify-css大口-jshint大口-concat大口-uglify大口-imagemin大口-notify大口-重命名大口-livereload大口-cache del - save-dev

-save和-save-dev可以避免您手动修改package.json文件。

Npm安装模块-名称-保存会自动将模块和版本号添加到依赖项部分。

npinstallmodule-name-save-dev会自动将模块和版本号添加到devdependencies部分中的gulp命令中。你只需要知道五个吞咽命令。

定义任务名称：任务名称deps:从属任务名称fn:回调函数。

狼吞虎咽地跑(任务.):并行运行尽可能多的任务。

goog . watch(glob，fn):当glob内容改变时，执行fn。

gough . src(glob):要处理的文件的路径，可以是数组中多个文件的形式，也可以是常规形式。

gough . dest(path[，options]):设置生成文件glob的路径：可以是直接文件路径。他的意思是模式匹配。grave通过管道()API将要处理的文件定向到相关插件。通过插件执行文件处理任务。

gough . task(' default '，function(){ 0.});这个API是用来创建任务的，你可以在命令行输入$ figure[default](括号表示可选)来执行上面的任务。

美国石油学会官方文件：https://github.com/gulpjs/gulp/blob/master/docs/API.md.

大口插件百科：http://gulpjs.com/plugins/开始构建这个项目。在项目的根目录中创建新的gulpfile.js文件，并粘贴以下代码：

//在项目的根目录中引入galve和uglify插件var galve=require(' galve ')；var uglify=require('大口-uglify ')；glaugh . task(' compress '，function(){ return glaugh . src(' script/*)。js’)。烟斗。管道(大口.目的地(' dist '))；});注意：gulpfile.js的文件名不能更改。项目中需要使用Uglify和rename插件，并执行以下命令来安装它们：

npminstall-save-dev大口-uglifeynpm install-save-dev大口-rename以我的为例，输入gulpfile.js所在的目录：

CD/user/trig kit 4/大口-测试并输入：

定义变量大口=require('大口');var uglify=require('大口——丑八怪’)；var rename=require('大口-重命名');天啊。task(' compress '，function(){ return glaugh。src(' script/*).js ').烟斗。管道（重命名(' jquery.ui.min.js ').管道（大口。目的地(“dist”)；});该命令会安装package.json下的全部依赖，如下图所示：

完整的gulpfile.js

//载入外挂定义变量大口=require('大口)、sass=require('大口-ruby-sass ')、autoprefixer=require('大口-autoprefixer ')、minifycss=require('大口-minify-css ')、jshint=require('大口-jshint ')、uglify=require('大口-uglify ')、imagemin=require('大口-imagemin ')、rename=require('大口-rename ')、clean=require('大口-clean ')、concat=require('大口-concat ')，//样式海鸥。task(' style '，function(){ return gull。src(' src/style/main。SCS ').管道(sass({ style: 'expanded '，}).管道(autoprefixer('最后2个版本、“safari 5”、“ie 8”、“ie 9”、“opera 12.1”、“ios 6”、“android 4”).管道（大口。目的地(“dist/style”).管道（重命名({后缀： '。min' }).管道(minifycss()).管道（大口。目的地(“dist/style”).管道（通知({ message : '样式任务完成' })；});//脚本天啊。task(' scripts '，function(){ return glaugh。src(' src/脚本/* */*).js ').管道(jshint(' .jshintrc ').管道(jshint.reporter('默认')。管道(concat('main.js ').管道（大口。目的地(“dist/scripts”).管道（重命名({后缀： '。min' }).烟斗。管道（大口。目的地(“dist/scripts”).管道(通知({消息：‘脚本任务完成’})；});//图片天啊。task(' images '，function(){ return glaugh。src(' src/images/* */*).管道（缓存(imagemin({ optimization level : 3，progressive: true，interlaced: true }).管道（大口。目的地(“dist/images”).管道（通知({ message: 'Images任务完成' });});//清理天啊。任务(' clean '，function(){ return glaugh。src([' dist/style '，' dist/scripts '，' dist/images']，{read: false}).管道（清洁());});//预设任务海鸥。task(' default '，['clean']，function(){ gull。start(‘style’‘scripts’‘images’)；});//看守高夫。任务(' watch '，function() { //看守所有。半导体色敏传感器档高夫。手表(' src/style/* */*).SCS '，[' style '])；//看守所有。射流研究…档高夫。观察(' src/scripts/* */*).js '，[' scripts '])；//看守所有图片档高夫。watch(' src/images/* */*，[' images '])；//建立即时重整伺服器var server=livereload()；//看守所有位在dist/目录下的档案，一旦有更动，便进行重整大口地看着on('change '，function(file){ server。已更改(文件。路径)；});});注：管道()是溪流模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。

吞咽。任务('任务名称，function(){ return gulf。' src('文件路径') .管道（.) .管道（.) //直到任务的最后一步。管道（.);});吞咽插件大口-高-页：使用吞咽来把减价生成超文本标记语言文档并上传到饭桶页面上https://github.com/shinnn/gulp-gh-pages

定义变量大口=require('大口');var ghPages=require('大口-生长激素-页数')；高夫。任务(' deploy '，function(){ return gough。src ' ./dist/**/*).pipe(GHPages())；});

大口翡翠插件：将翡翠编译成超文本标记语言文件少饮插件：将较少的编译成钢性铸铁文件

var less=require('无吞咽');var path=require(' path ')；高夫。task(' less '，function(){ return gough。src ' ./less/**/* .减')。管道(小于({ path s :[path。join(_ dirname，' less '，' includes') ] }).烟斗（大口。目的地./public/CSS ')；});大口直播服务器插件：方便的，轻量级的服务器定义变量大口=require('大口');var gls=require('大口-实时服务器’)；坟墓。任务(' serve '，function() { //1 .使用默认设置var服务器=gls。static()；//等于gls.static('public '，3000)；服务器。start()；//2.服务于客户端口var server=gls.static('dist '，8888)；服务器。start()；//3.服务多文件夹var server=gls.static(['dist '，').tmp '])；服务器。start()；//使用腺体。看触发服务器操作（通知、启动或停止)腺体。手表(['静态/* */*).css '，' static/**/* .html']，函数（文件){ server.notify.apply(服务器，[文件]);});});一饮而尽，可以实时保存刷新，那样就不用按F5和切换界面了吞咽加载插件：在你的package.json文件中自动加载任意的吞咽插件

$ npm安装-保存-开发-大量加载-插件例如一个给定的package.json文件如下：

{“依赖项”: {“鸥-js提示”:“*”、“鸥-concat”:“*”} }在gulpfile.js中添加如下代码：

定义变量大口=require('大口');var GullLoadPlugins=require(' GullLoadPlugins-plugins ')；var plugins=Gullloadplugins()；插件。js提示=require(' gull-js提示')；插件。concat=require(' gull-concat ')；大口-巴贝尔：大口的巴别塔插件，

$ npm安装-保存-开发大口-巴别塔-预置-es2015使用方法：

常数大口=require('大口');const babel=require(' grave-babel ')；天啊。任务(' default '，()={ return glaugh。src(' src/app。js ').管道（巴别塔({预设ss :[' es 2015 ']}).管道（大口。目的地(“dist”)；});官方https://github.com/gulpjs/gulp