备注:    测试使用的是gulp 进行的编译 1. 项目初始化 npm init mkdir src touch app.css body{ display: flex; } 2. 安装(gulp .gulp-postcss 以及几个依赖) npm install -g gulp-cli npm install gulp-postcss --save-dev npm install gulp --save-dev npm install autoprefixer --save-dev npm…

原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpj…

以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/ 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的…

一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. grunt存在问题 1.插件职能不够单一 2.插件完成了本不该由插件完成的事情(这个我有点迷糊,为什么说是 things don't need to be plugins?) 3.配置过于复杂 4.由于糟糕的流程控制导致的临时文件/目录 三. gulp安装 1.首先全局安装gulp命令行工具(相当…

题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs的安装. 一. 执行gulp的安装命令,跟其他插件一样,也存在全局安装或者项目内安装的区别 二. Gulp跟grunt的功能是一致的.压缩js.css.html.图片,合并文件等功能 这一步是安装所需要的对应的插件 PS: gulp plugins,用来寻找相应的gulp组件 gulp-uglify…

Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gulp的插件包也好,都是要在npm这个里边弄出来的. 可以理解为,一个硬盘,里边放的各种整理好的.适用于各种功能的且不重复的文件夹(插件),然后我们需要啥,就去里边摘下来. 当然也可以用它来删除插件 //反正基于他的命令语句就有很多,常用的我先搞到这里 //其他相应的放到相应上下文中好了,本来打算单独…

随着iphoneX的出现,新的一轮适配大法应该又出现了吧?不论是使用flex布局或者媒体查询,好似都不能完全解决新加的刘海带来的适配问题. 但是有一个单位vw就神奇的解决了这个问题.vw和vh是相对于视口(viewport)的宽度和高度 ,1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度: 1vh等于视口高度(viewport height)的百分之一.做移动端适配的时候,试想想,也就是将手机的视口进行高密度的细分,随着屏幕的改变,1vw所代表的视口…

1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输入npm -v回车打印出npm的版本号,说明npm也安装成功(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm). 这里推荐用nvm安装.附上链接地址 http://www.cnblogs.com/yesyes/p/7403184.html 2. 设置npm 由于https…

gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js.而且升级npm到最新版本号. 安装nodeJS 基本參考传送门戳这里:安装nodeJs.安装nodeJs2.nodeJs下express的安装到执行 1.    从nodejs.org下载最新的nodejs安装包.并安装. 2.    进入nodejs的安装路径下: 天真的以为这样就能够了. wat…

Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev…

gulp安装正常,但是查看gulp -v和使用gulp的时候报错, 原因:缺少环境变量或环境变量错误. 查找环境变量的方法:在dos下输入npm config get prefix就会显示一个地址,这个地址就是那个系统变量PATH 例如: path中添加路径:C:\Users\z\AppData\Roaming\npm…

我是经过公司另外一个同事推荐的这个 他是一个资深的大哥哥  我觉得我确实需要跟多的学习和成长 而且我觉得我应该听他的话 多学学新知识 最近一直在做适配的网站 会出现很多媒体查询 我发现用这个写媒体查询 会很方面开发 能很大的提升开发速度 于是我今天特意来公司 (在家里没有学习的心思 就只想吃东西 但是我今天在公司还是吃了很多零食 ) 我费了九牛二虎之力还是没有弄好  于是乎我开始弄less 发现很好弄 但是我还是不想死心 就在我心灰意冷的时候发现了一篇文章 虽然我也好复制 但是还是要把原作地址写…

1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查看下版本,如果有显示版本,说明已经安装成功. 4.输入npm -v,查看下npm的版本,如果有显示版本,说明已经安装成功. 5.输入npm install -g gulp命令,安装全局的gulp. 6.安装好后输入gulp -v查看版本,如果有显示版本,说明已经安装成功. 7.在C盘新建个项目,在项…

1.安装 全局安装: npm intstall gulp -g      (首先你得有node.js ,这个可以去node 官网下载个iso的镜像安装包,傻瓜式安装.自带npm) 安装在项目中: 首先是跳转到项目根目录,比如   D:demo/test  (文件夹)    cmd 中 使用 cd d:/demo/test     然后输入 npm install gulp --save-dev 安装外挂: 操作一样,到根目录 输入 npm install gulp-package --save-…

1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install -g rimraf gulp 项目下新建package.json和gulpfile.js. 打开package.json添加 {}  花括号,保存. 2.gulp插件(每个项目都要安装一次)cnpm install --save-dev gulp gulp-repla…

目录: 1.安装nodejs2.使用命令行3.npm介绍4.选装cnpm5.全局安装gulp6.新建package.json文件7.本地安装gulp插件8.新建gulpfile.js文件9.运行gulp10.使用webstorm运行gulp任务11.总结 简介 gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动…

1. npm install gulp -g    全局安装  npm install gulp --save-dev  安装文件内,纪录于package.json     接著安装插件,完成下列任务: 编译Sass (gulp-ruby-sass) Autoprefixer (gulp-autoprefixer) 缩小化(minify)CSS (gulp-minify-css) JSHint (gulp-jshint) 拼接 (gulp-concat) 丑化(Uglify) (gulp-ugl…

第一步:安装node 搭建node环境:进入官网 http://nodejs.org  ,然后点击的绿色的 install 按钮,下载完成后直接运行程序. 第二步:使用命令行 (1)输入指令:node -v  (回车) (2)输入指令:npm -v   (回车) 如果node正确安装,会得到相应的版本号(如下图所示) 第三步:安装gulp 1. 安装 gulp: $ npm install --g gulp 运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号…

熟悉 Hellolily的过程中,了解了这个. 环境: ubuntu 14.04 LTS 64bit 源码安装方式: 下载最新源码:如果被和谐请自行想办法. 解压并编译安装: cd node-xxx sudo ./configure sudo make sudo make install 这样弄完, node和npm都装上了.(编译时间--make--可能很长) 使用淘宝镜像的cnpm 对于nodejs来说,每个项目似乎都需要一个node_modules模块, 每个node_modules模块的…

1.全局安装gulp:sudo npm install -g gulp 2.代码根目录:npm install 3.gulp 开始编译(在项目根目录下创建一个名为 gulpfile.js 的文件) 注:先安装了node才可以…

命令:express -e ./ express表示安装express -e表示使用ejs作为模板 ./表示当前目录中 (使用上面的命令之前我们应该使用npm安装express框架 sudo npm install -g express sudo npm install -g express-generator ) 1.1安装cnpm 执行 npm install cnpm -g --registry=https://registry.npm.taobao.org 1.2检测cnpm是否安装成功…

前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 说实在的,我并不是很清楚gulp是干什么的,但是每个人都说好,出于好奇心,忍不住就来研究一下,所以,搞清楚这个流程还是很有必要的. 基本安装 安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安装 npm install gulp -g 随便在哪个路径…

下面是今天在配置gulp运行项目时遇到的问题几个问题及其完整的安装过程: 1.安装node.js .gulp是基于nodejs使用的 查看版本node   -v 2.npm install gulp -g 全局安装gulp(重点) 重点: 3.新建一个项目目录,进入项目目录(cd+项目路径或者找到项目文件shift+鼠标右键->在此处打开命令窗口) 4.创建一个模块 npm init      //在项目目录中生成一个package.json 5.本地安装gulp npm install gul…

前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 说实在的,我并不是很清楚gulp是干什么的,但是每个人都说好,出于好奇心,忍不住就来研究一下,所以,搞清楚这个流程还是很有必要的. 基本安装 安装gulp之前我们需要安装nodejs的环境,检测能够正常使用npm后,我们用npm对gulp进行一次全局安装 npm install gulp -g 随便在哪个路径…

1. 安装nodeJs   2. 全局安装gulp: npm install gulp -g   3. 在cmd切换至项目文件夹下 npm init,创建package.json文件(JSON文件内不能写注释) {   "name":"test",   //项目名称(必须)   "version":"1.0.0",   //项目版本(必须)   "description":"This is for…

1.安装nodejs并选装cnpm: npm install cnpm -g --registry=https://registry.npm.taobao.org 2.全局安装gulp: cnpm install gulp -g 3.新建package.json文件:(第二次在项目中使用gulp时可跳过1.2步) 进入项目文件夹,cnpm init 4.本地安装gulp: cnpm install gulp --save-dev  5.安装gulp插件: cnpm install ### --s…

1 全局安装gulp:npm install -g gulp 2 在项目根目录中,安装项目的开发依赖:npm install --save-dev gulp 2.1 根据gulpfile.js中的依赖包,先安装好对应的包.如:npm install --save-dev gulp-uglify 3 在需要构建打包的目录下,新建一个gulpfile.js文件,在该文件中,写上task任务.如下所示: var gulp = require('gulp'); //npm install --save-…

我们要考虑两种情况? 1. 本地安装和全局安装gulp npm i -g gulp && npm i --save-dev gulp 2.新建package.json,然后手动填写缺少的模块名 我的办法是这样的,提示什么模块缺少就直接全局安装,一旦安装以后就会提示最新的版本号,这时,只要我们把版本号填写正确! 最后再运行 npm install 然后运行 gulp…

測试环境 Mac:10.10.4 Gulp:3.9.0 时间:2015年08月15日18:07:08 安装Gulp sudo npm install --global gulp npm install --save-dev gulp 输入gulp -v,显示版本号说明成功安装 使用Gulp 在项目根文件夹创建gulpfile.js文件 var gulp = require('gulp');//引用gulp gulp.task('default', function() {//创建一个task任务…

1.先安装node.js ,官网下载地址:https://nodejs.org/en/ 2.安装完node之后,npm自动就安装了.可以直接在visual studio code 通过命令查看 node -v npm -v 3.由于npm的镜像国内的网络不行,我们需要将npm 镜像指向淘宝的npm镜像,执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 4.接下来,所有npm相关的命令,我们都用 cnpm来代替,…