首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

给初学者的Gulp教程(译)

brunch式一个相似的工具,聚焦于资源文件以及它捆绑在一些常用的任务上,像服务器和文件监视器。 最主要的区别是你如何使用他们配置工作流。Gulp配置倾向于更短和更简单,相对于Grunt。...npm install命令,使用Node Package Manager(npm)来安装Gulp。 -g标志代表这个安装全局安装到你的电脑上,这就运行电脑的任何地方都能使用gulp。...node-modules.png 我们差不多可以开始使用Gulp来工作了,我们做这个之前,我们还要了解我们如何在项目中使用Gulp,以及确定项目的目录结构。...这比基于Ruby的方法要快。如果你希望Ruby方法,你也可以使用gulp-ruby-sass或者gulp-compass插件来代替。...watchers }) 我们也希望确定sasswatch之前运行,所以CSS将在我们运行Gulp命令,是最新的。

4.3K20

使用Gulp进行JavaScript自动化简易说明书

然而,对于捆绑的应用程序,无法达到Gulp提供的可定制性和可扩展性。...它使用一个名为 gulp-sass插件,这个插件基于libsass。我在这里选择使用libsass, 因为它比Ruby的替代方法更快,尽管它缺少一些功能。...一旦项目的根目录中,你可以使用以下命令安装所需的所有插件。 npm install 此命令读取package.json文件并安装所需的所有依赖。...第一个表示包括子文件夹在内所有文件夹中以“.scss”结尾的文件,第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。...通过遵循本教程中描述的步骤,您将可以将来和您的旧项目中完全自动完成软件开发过程。投入一些时间为您的旧项目建立一个构建系统,一定会为您节省宝贵的时间。 请继续关注更高级的Gulp教程即将推出。

3.2K10
您找到你想要的搜索结果了吗?
是的
没有找到

前端构建工具gulpjs的使用介绍及技巧

然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。...Grunt主要是以文件为媒介来运行它的工作流的,比如在Grunt中执行完一任务后,会把结果写入到一个临时文件中,然后可以在这个临时文件内容的基础上执行其它任务,执行完成后又把结果写入到临时文件中,然后又以这个为基础继续执行其它任务...Gulp内部使用了node-glob模块来实现其文件匹配功能。...", "gulp-ruby-sass": "~0.4.3", "gulp-load-plugins": "~0.5.1" } } 然后我们可以gulpfile.js中使用gulp-load-plugins...用gulp.dest()方法写入文件,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以之前用gulp-rename插件来改变文件流中的文件名。

1.8K30

使用Gulp

为什么要使用Gulp 在前端开发中通常需要做,预处理语言的编译、js文件的压缩、css文件的压缩、图片的压缩等一系列工作,而使用Gulp可以自动化的完成这些工作,从而提高网站的开发效率,我的博客使用Less...中介绍了将Less文件编译成CSS文件的方法,仔细观察可以看到如果按照博客中介绍的方法,在编译多个Less文件或者编译不同文件夹下的Less文件需要执行多次Less文件编译命令,而使用Gulp可以一次性完成这些操作...创建一个code文件夹,并进入到code文件夹下 下面的命令是Git bash中运行的,运行这几条命令,需要安装Git,没有安装Git的可以电脑上自己手动创建一个code文件夹,并且进入code文件夹下...; }); 8.使用gulp 打开命令行,并且命令行中执行gulp say命令,可以看到控制台中输出了一句”say hello”表示Gulp安装成功 使用Gulp实现一个文件拷贝任务 下面的操作都是目中安装了...index.html文件,修改完成后只要一保存,HTML代码就能同时同步到dist文件夹下的index.html中 使用Gulp自动将Less编译成CSS 下面的操作都是目中安装了Gulp的情况下进行的

55630

如何在CentOS 7上使用MEAN.JS安装MEAN堆栈

本指南中,我们将使用MEAN.JSCentOS 7服务器上安装MEAN堆栈。使用此方法包括首先安装MongoDB,然后安装NodeJS,然后从GitHub克隆MEAN.JS文件。...第1步 - 安装依赖 因为我们将从源代码编译应用程序,克隆Git存储库以及安装Ruby gem,所以我们首先需要安装一些依赖。...sudo yum install gcc-c++ make git fontconfig bzip2 libpng-devel ruby ruby-devel 我们将要安装的一些Node.js模块将需要...使用Ruby的包管理器gem来安装它。 sudo gem install sass 现在已经安装了依赖,我们可以安装堆栈的第一个组件:MongoDB。...最后一步中,我们将测试堆栈以确保它正常工作。 第6步 - 运行示例MEAN应用程序 让我们运行示例应用程序以确保系统正常运行。一种方法是使用npm start,另一种方法是使用gulp

1.1K00

Gulp和Webpack对比

目中通过npm安装一个gulp-minify-css的模块 $ npm install gulp-minify-css -D 2....目中通过npm安装gulp-uglify和gulp-concat模块 $ npm install gulp-uglify gulp-concat -D 2....Gulp中启动本地服务有一个很方便的配置,就是``livereload:true``属性的设置,设置后浏览器会根据你项目中资源的变化自动刷新浏览器(如果你的chrome浏览器设置该属性后在你修改文件并保存仍没有自动刷新...答案是肯定的,Webpack官方提供了一个辅助开发工具,它可以自动监控项目下的文件,一旦有修改保存操作,开发服务器就会自动运行Webpack 打包命令,帮我们自动将开发的代码重新打包。...理论上好像是这样,但是实现好像有不少限制,比如,HTML文件的自动刷新问题(html-webpack-plugin插件使用老是报错),当本地server启动非output.path路径之外则不能自动刷新等问题

2.1K40

CSS拓展语言:Sass介绍

Sass的安装 安装Ruby 命令行执行 gem install sass 看是否安装成功:命令行中执行 sass -v 注意:由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon...:output.css 如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录: sass --watch app/sass:public/stylesheets 使用sass --...或者可以参考该项目的做法:用Gulp及插件来做。 当启动Gulp的任务后,src下的scss文件变化时,就会将scss文件编译成对应的CSS。... /*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。 插值 选择器和属性上使用变量,必须用差值。否则会报错。...命令,用来插入外部文件。

1.2K20

武装你的小程序——开发流程指南

有两种方式可以做到,第一种是改写sass处理的源码,当遇到import语句跳过。...第二种是,把文件交给sass处理前,我们先把import语句部分注释掉,这样sass处理的时候就会忽略了,当sass处理完成后,再把注释掉的语句打开即可。...完整实现支持scss思路如下: 指定文件处理目录 gulp-replace通过正则匹配@import语句将其注释 判断当前@import语句是否存在于变量和函数文件的配置路径中 不存在就注释,存在就跳过...启用gulp-sass编译scss文件, 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...代码实现 写入和读取均支持key ---> value的普通方式也兼容key--->value--->module的模块方式,默认使用同步的方式设置,之所以加catch是为了防止特殊情况下小程序会报警设置缓存错误

2K30

武装你的小程序——开发流程指南

有两种方式可以做到,第一种是改写sass处理的源码,当遇到import语句跳过。...第二种是,把文件交给sass处理前,我们先把import语句部分注释掉,这样sass处理的时候就会忽略了,当sass处理完成后,再把注释掉的语句打开即可。...完整实现支持scss思路如下: 指定文件处理目录 gulp-replace通过正则匹配@import语句将其注释 判断当前@import语句是否存在于变量和函数文件的配置路径中 不存在就注释,存在就跳过...启用gulp-sass编译scss文件, 通过postcss对低版本ios和安卓进行兼容样式处理 gulp-rename更改文件后缀为.wxss gulp-replace通过正则匹配@import语句打开注释...代码实现 写入和读取均支持key ---> value的普通方式也兼容key--->value--->module的模块方式,默认使用同步的方式设置,之所以加catch是为了防止特殊情况下小程序会报警设置缓存错误

3.9K40

从零开始构建你的 Gulp

default 默认任务 当我们运行 gulp 命令Gulp 将会执行 default 默认任务,而该任务具体代码如下所示: // default.js const gulp = require(...,IE9+ pixrem 给 rem 添加 px 作为降级处理,IE8+ postcss-import 使用 @import 合并样式表 cssnano 删除空格和最后一个分号,删除注释,优化字体权重,...,但在项目中并没有全都使用到,这里只是给大家多一种选择方式 图片 生成精灵图的插件有很多,我们在这里选择的是 sprity 插件,反正我折腾了这么多个插件之后,这一个是最友好的,我是 Windows...、快速响应 HTML、CSS、JS、Sass、Less 等文件更改并自动刷新页面,更重要的是,可以同时 PC、平板、手机等设备下进项调试,我们可以使用 Browsersync 提供的静态服务器,对我们的...html 文件进行测试,也可以使用代理服务器,来对 php 文件进行测试,而我们在这里使用的静态服务器 // browser-sync.js const gulp = require('

1K40

从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么?

response.send(request.body); // echo the result back }) app.listen(3000, function () { console.log("服务器运行中...const gulp = require('gulp'); // 创建任务 // 第一个参数: 任务名 // 第二个参数: 回调函数,当我们执行任务就会执行这个函数 gulp.task('test'...当然,学习它之前,你需要注意browser-sync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js。 然后,你可以全局安装它。...可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用Node.js项目中还能结合gulp-nodemon实现全栈的自动刷新。...script:指向服务器文件地址。 ignore:忽略部分对程序运行无影响的文件的改动,nodemon只监视js文件,可用ext来扩展别的文件类型。

58820

JavaScript全栈开发-工具篇

npm的默认仓库源访问比较慢,可通过修改npm配置注册源地址或npm安装模块带--registry选项指定源仓库地址。 2....-g:--global,表示全局安装,全局安装后可在任何目录执行grunt命令 --save-dev:表示安装grunt模块模块会被自动加到项目的package.json文件的依赖列表中 1.2...上述安装的其它模块使用方法可参考插件模块页面的介绍。...常见的Gulp模块说明 项目目录安装Gulp及常见的Gulp插件: 2.2 Gulp配置 模块安装完成后,项目根目录下创建 gulpfile.js 代码文件。...-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件的EventEmitter

1.5K20

Laravel中运行Gulp任务的利器(一) —— Laravel Elixir简介及入门教程

该API集成了Gulp,为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许多其他日常任务提供了一个简单的解决方案,从而减少编写上述繁琐任务的时间,有效提高编程效率。...安装完Node后,可以通过命令行查看Node版本确保安装成功: $ node -v v0.10.36 Node用户可以通过NPM获取成千上万个第三方模块库,然后使用 npm 安装这些模块,我们正是使用..."gulp": "^3.8.8", "laravel-elixir": "*" } } Node的 npm 包管理器使用 package.json 来安装项目的Node模块依赖。...你可以使用如下命令本地安装这两个包: $ npm install 安装完成之后,你会看到项目根目录下新增了一个 node_modules 文件夹,该文件夹内包含了我们刚刚安装的 gulp 和 laravel-elixir...你可以通过项目根目录下运行 gulp 命令来执行定义 elixir 方法中的任务: $ gulp [13:16:18] Using gulpfile ~/Software/dev.todoparrot.com

2K91

Node.js基础

1.2服务器端开发要做的事情 实现网站的业务逻辑 数据的增删改查 1.3为什么选择Node 使用JavaScript语法开发后端应用 一些公司要求前端工程师学握Node开发...4.4 Node.js中模块化开发规范 Node.js规定一 个JavaScript文件就是一 个模块模块内部定义的变量和函数默认情况下在外部无法得到....4.5模块成员导出 // a.js //模块内部定义变量 let version = 1.0; //模块内部定义方法 const sayHi = name =>`您好, ${name}`; //向模块外部导出数据...6.5第三方模块gulp 基于node平台开发的前端构建工具 将机械化操作编写成任务,想要执行机械化操作执行一个命令行命令任务就能自动执行了 用机器代替手工,提高开发效率。...公共文件抽离 修改文件浏览器自动刷新 6.7 Gulp使用 使用npm install gulp下载gulp库文件 项目根目录下建立gulpfile.js文件 重构项目的文件夹结构

1.7K20

前端构建工具 Gulp.js 上手实例

软件开发中使用自动化构建工具的好处是显而易见的。...---- 在前端项目中配置 Gulp.js 要在你的项目中使用 Gulp, 有几个关键的步骤需要完成: 安装两个依赖包 安装你需要的任意插件 创建 gulpfile.js 文件,在其中定义你要运行的任务...首先,要安装依赖: npm install --save-dev gulp gulp-util 接下来,安装我们需要使用到的 Gulp 插件,这些插件同样也都是 Node 模块,我们同样使用 npm...当然,这行代码通常也要放到某个任务中去运行。 ---- 转到 Gulp.js 我开始使用 Grunt 之前的几年里,一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。...第一次看到 Gulp 的介绍,就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说,这语法是是太舒服了。一看就懂,看一遍就会,不是吗?

2K70

【前端面试题】08—31道有关前端工程化的面试题(附答案)

2、使用 WebPack,你都做些什么?... output中配置出口文件, entry中配置入口文件。 使用各种 loader对各种资源做处理,并解析成浏览器可运行的代码。 3、你用Gulp都实现了哪些功能?...使用 imagemin压缩图片,使图片变小。 使用open让项目自动运行时自动打开浏览器。使用 watch监听src目录中代码的变化,并进行实时编译。...11、说说 WebPack支持的脚本模块规范。 不同项目定义脚本模块使用的规范不同。...使用 export,用 import引入的相应模块名字一定要和定义的名字一样;而在使用 export default,用 import引入的模块名字可以不一样。

2.8K30

12条专业的JavaScript规则

行内 JavaScript 每次页面加载都会重新下载,相反的,单独的 .js 文件则会被缓存起来。正如你所看到的,这个规则有助于支持如下一长串的其他规则。这就是为什么它的规则# 1。...2、JS 应该是静态的 我看到过很多程序员喜欢动态的使用JavaScript。他们喜欢像使用服务器端语言如C#, Ruby, Java那样来动态的使用JavaScript。千万不要这么做。...这个简单的JSON代码片段为你使用静态JavaScript文件自定义行为提供了必要的数据支持。为了实现这一点,需要序列号服务器端类为JSON,然后放置 中。...有很多这样的工具,我建议使用 ESLint。你可以使用 Gulpgulp-eslint 来运行它。Gulp 可以查看你所有的 JS 文件,并在你每次保存的时候运行 linter。...当你移动到客户端的时候,不要忘记你服务器端学到的经验教训。 这里并不仅仅意味着就像你Angular 和 Knockout等 MVC 框架中那样分离模型、视图、控制器。

98990
领券