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 }) 我们也希望确定sass在watch之前运行，所以CSS将在我们运行Gulp命令时，是最新的。
然而，对于捆绑的应用程序，无法达到Gulp提供的可定制性和可扩展性。...它使用一个名为 gulp-sass插件，这个插件基于libsass。我在这里选择使用libsass， 因为它比Ruby的替代方法更快，尽管它缺少一些功能。...一旦在项目的根目录中，你可以使用以下命令安装所需的所有插件。 npm install 此命令读取package.json文件并安装所需的所有依赖项。...第一个表示包括在子文件夹在内所有文件夹中以“.scss”结尾的文件，第二个表示排除以“_”开头的文件。。这样我们可以使用SCSS的内置函数@import来连接_page.scss文件。...通过遵循本教程中描述的步骤，您将可以在将来和您的旧项目中完全自动完成软件开发过程。投入一些时间为您的旧项目建立一个构建系统，一定会为您节省宝贵的时间。 请继续关注更高级的Gulp教程即将推出。
然后以全局方式安装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插件来改变文件流中的文件名。
为什么要使用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的情况下进行的
在本指南中，我们将使用MEAN.JS在CentOS 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。
在项目中通过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路径之外时则不能自动刷新等问题
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。...在 /*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。 插值 在选择器和属性上使用变量，必须用差值。否则会报错。...命令，用来插入外部文件。
npm的默认仓库源访问比较慢，可通过修改npm配置注册源地址或npm安装模块时带--registry选项指定源仓库地址。...配置文件 模块安装完成后，在项目根目录创建名为Gruntfile.js的配置文件。...上述安装的其它模块的使用方法可参考插件模块页面的介绍。...在项目目录安装Gulp及常见的Gulp插件： npm install gulp --global # 安装常见Gulp模块 npm install gulp-cache --save-dev npm install...--save-dev npm install del --save-dev 2.2 Gulp配置 模块安装完成后，在项目根目录下创建 gulpfile.js 代码文件。
有两种方式可以做到，第一种是改写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是为了防止在特殊情况下小程序会报警设置缓存错误
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('
： mkdir learning-angular cd learning-angular npm init 编辑生成的 package.json 文件， 添加 angular2 的 npm 包及其依赖项：...npm install 使用 es5 开发 Angular2 应用 Angular2 是个客户端框架， 在浏览器中运行， 因此使用 Javascript (es5) 来做开发也是完全可行的。...TypeScript 最终会被编译成 JavaScript 的模块 (commonjs/amd/system) ， 因此需要一个模块加载器， 官方使用的是 SystemJS， 因此我们要安装 SystemJS...模块： npm install systemjs --save 还需要 TypeScript 编译器， gulp、 gulp-typescript 来实现 ts 文件的自动编译： npm install...typescript gulp gulp-typescript --save-dev 完整的 package.json 可以在我的 github 项目中查看。
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项来扩展别的文件类型。
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
该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
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文件 重构项目的文件夹结构
然后以全局方式安装gulp： npm install -g gulp 全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次。...install --save-dev gulp 这样就完成了gulp的安装，接下来就可以在项目中应用gulp了。...： 2 运行gulp任务 要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具)，然后在命令行中执行gulp命令就行了，...gulp内部使用了node-glob模块来实现其文件匹配功能。...当有多种匹配模式时可以使用数组 //使用数组的方式来匹配多种文件 gulp.src(['js/*.js','css/*.css','*.html']) options为可选参数。
在软件开发中使用自动化构建工具的好处是显而易见的。...---- 在前端项目中配置 Gulp.js 要在你的项目中使用 Gulp, 有几个关键的步骤需要完成： 安装两个依赖包 安装你需要的任意插件 创建 gulpfile.js 文件，在其中定义你要运行的任务...首先，要安装依赖项： npm install --save-dev gulp gulp-util 接下来，安装我们需要使用到的 Gulp 插件，这些插件同样也都是 Node 模块，我们同样使用 npm...当然，这行代码通常也要放到某个任务中去运行。 ---- 转到 Gulp.js 在我开始使用 Grunt 之前的几年里，一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。...第一次看到 Gulp 的介绍时，就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说，这语法是在是太舒服了。一看就懂，看一遍就会，不是吗？
2、在使用 WebPack时，你都做些什么？...在 output中配置出口文件，在 entry中配置入口文件。 使用各种 loader对各种资源做处理，并解析成浏览器可运行的代码。 3、你用Gulp都实现了哪些功能？...使用 imagemin压缩图片，使图片变小。 使用open让项目在自动运行时自动打开浏览器。使用 watch监听src目录中代码的变化，并进行实时编译。...11、说说 WebPack支持的脚本模块规范。 不同项目在定义脚本模块时使用的规范不同。...在使用 export时，用 import引入的相应模块名字一定要和定义的名字一样；而在使用 export default时，用 import引入的模块名字可以不一样。
行内 JavaScript 在每次页面加载时都会重新下载，相反的，单独的 .js 文件则会被缓存起来。正如你所看到的，这个规则有助于支持如下一长串的其他规则。这就是为什么它的规则# 1。...2、JS 应该是静态的 我看到过很多程序员喜欢动态的使用JavaScript。他们喜欢像使用服务器端语言如C#, Ruby, Java那样来动态的使用JavaScript。千万不要这么做。...这个简单的JSON代码片段为你使用静态JavaScript文件自定义行为提供了必要的数据支持。为了实现这一点，需要序列号服务器端类为JSON，然后放置在 中。...有很多这样的工具，我建议使用 ESLint。你可以使用 Gulp 的 gulp-eslint 来运行它。Gulp 可以查看你所有的 JS 文件，并在你每次保存的时候运行 linter。...当你移动到客户端的时候，不要忘记你在服务器端学到的经验教训。 这里并不仅仅意味着就像你在Angular 和 Knockout等 MVC 框架中那样分离模型、视图、控制器。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
