cmd小技巧: 1.换到下级或同等级目录 D: 2.换到上级目录 cd.. node 包管理器小技巧[以gulp为例] npm install --save-dev gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector 等等插件 gulpfile.js中的代码 var gulp = require('gulp'), //基础库 clean = require('gulp-clean'), //清空文件夹 minify = req…

这里还是有点坑,要注意. 安装NODE.JS不说,GULP绿色化也不说. 但要让JENKINS识别环境变量. /etc/profile.... export NODE_HOME=/usr/local/node-v0.12.3-linux-x64 export PATH=$PATH:$NODE_HOME/bin export NODE_PATH=$NODE_HOME/lib/node_modules export PATH=$PATH:$NODE_HOME/lib/node_modules/gul…

gulp 是基于 node 实现的,那么我们就需要先安装 node. Node 是一个基于Chrome JavaScript V8引擎建立的一个平台,可以利用它实现 Web服务,做类似PHP的事. 打开 https://nodejs.org/ 点击绿色的 INSTALL 按钮下载安装 node. 使用终端/命令行 命令行 在 Windows 中可按 徽标键(alt键左边)+ R 打开输入 cmd + Enter 打开命令行. 终端(Mac) 打开 Launchpad(像火箭一样的图标),在屏幕上…

参考文献:http://blog.csdn.net/yuanyuan214365/article/details/53749583 1.安装nodejs:nodejs nodejs安装路径随意 node-v 2.全局安装淘宝cnpm:npm install cnpm -g --registry=https://registry.npm.taobao.org 3.全局安装gulp: cnpm install gulp -g 4.项目文件根目录新建package.json:新建package.jso…

github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在component文件夹.模板文件也可以放在其它文件夹,只要你引用的路径是对的 HTML文件放在src文件夹.(必须) 解析后输出的文件在dist文件里 在src目录下的index.html文件里引用模板 <% include ../component/head.html %> ...我的代码 <% inc…

##MAC 升级node.js的方法 ###第一步,先查看本机node.js版本: $ node -v ###第二步,清除node.js的cache: $ sudo npm cache clean -f ###第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 "n" $ sudo npm install -g n ###第四步,安装最新版本的node.js $ sudo n stable ###第五步,再次查看本机的…

现在node版本最新的稳定版在14+ 然后我在接手项目的时候使用gulp打包,怎么也打包不了,这个问题纠结了挺久,然后百度了下,发现版本的问题 node 12+ 以上的版本不兼容 gulp 3的版本 我用的是node 14+的版本 gulp3.9.1版本 然后解决方法是降低node版本到12以下,或者gulp升级到4+版本,gulp 4+版本修改了东西,所以项目中的一些需要更改,然后node的话,我这边做法是降低到11版本 在下载node低版本时我也发现了一些问题,找到node官网,里面更多版本…

安装node不再写    gulp 参考以下文档 https://blog.csdn.net/a599174211/article/details/82878095 1.使用npm命令安装,一下两个命令都需要使用gulp的安装非常简单,只要使用npm命令安装即可.但是因为gulp需要作为命令行的方式运行,因此需要在安装在系统级别的目录中. npm install gulp -g 因为在本地需要使用require的方式gulp.(需要进入到项目的路径下面)因此也需要在本地安装一份: npm ins…

/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIvar gulp = require('gulp');var less = require('gulp-less');var cssnano = require('gulp-cssnano'); // 1. LESS编译 压缩 --合并没有必要,一般预处理CSS都可以导包gulp.task('styl…

此前使用了最新的4.0之后的gulp版本,出现了一系列的问题. 于是想换回3.9版本 (一)本地与全局都需要安装gulp ①首先卸载原来版本 npm uninstall gulp ②本地与全局分别安装3.91版本gulp npm install gulp@3.9.1 npm install -g gulp@3.9.1 ③使用gulp -v查看当前gulp版本 ④安装 gulp命令行工具 npm install gulp-cli -g 总结一些问题 1.在4.0版本出现了一系列代码执行报错The…

本文介绍利用 gulp-rev 和 gulp-rev-collector 进行版本管理 npm官网介绍使用后的效果如下: "/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" => "//cdn8.exam…

1. 安装 Node 环境 参考 http://www.cnblogs.com/zichi/p/4627728.html,注意一起安装 npm 工具,并把路径保存到环境变量中(安装过程中会有提醒) 安装完后,用如下命令测试: node -v npm -v 2. 全局安装 gulp npm install gulp -g 这里有个误区,全局安装某个包,并不是说在任意文件中都能将它 require 进来而不报错,而是将其集成到了命令行中,我们能在命令行中使用 gulp taskname 这样的命令.…

1, gulp 依赖node, 使用gulp 之前,要先安装node.  Node 安装完成后,它自带npm. Npm: node package manager 就是node 包管理器. 用过java 的就知道,java 有许多包,我们使用一个包的时候,要先引入 import 这个包.Node 也是一样,当我们使用一个包时,就需要先安装它, npm install  包名. 2,  Node 安装完成, 按window +r 组合键,调用运行窗口,输入cmd, 打开windows 自带的命令窗…

第1步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 nodejs.org,下载完成后直接运行程序,就一切准备就绪.npm会随着安装包一起安装,稍后会用到它. 为了确保Node已经正确安装,我们执行几个简单的命令. node -v npm -v 如果这两行命令没有得到返回,可能node就没有安装正确,进行重装. 第2步:安装gulp 首先我们要全局安装一遍: npm install -g gulp 运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看…

类似于Grunt,gulp是另一个同样功能很强大的前端项目自动化利器. 下面是项目的效果:…

<Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程. 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下. gulp 代码 你可以 下载所有示例代码 或 在线查看代码 建议:你可…

一个完整的项目需要使用gulp的多种功能,包括—— (1)加载各种需要的插件 var concat=require('gulp'); var clean=require(''gulp); 等等.需要的插件放在指定的module文件夹下面,然后再修改文件中修改. (2)启动任务和完成部署任务 我们想要在文件进行操作之前,首先将文件的环境弄好,例如,想把a放在一个目录下,但是这个目录下面有着很多的不需要的文件,所以我们首先需要将这些文件删除—— gulp.task('cleanTask',funct…

将之前的东西的理论部分整理了一下—— gulp 前端构建工具 它可以帮助我们完成一些自动化操作 它需要一些插件的支持 var gulp = require('gulp'); --> gulp命令 require('yargs').argv; 它可以监听gulp后面添加的参数 关闭 gulp 服务器: 执行 ctrl + c var less = require('gulp-less'); -->> less预处理器,目的就是把 .less文件转换成普通css文件 var header =…

这是一种简单的工具,非常容易上手而且功能也是多种多样. 例如将整个网站打包下来的时候,看到的js代码总是混乱的,这就是类似于gulp的工具进行了加密,其他的功能还有很多这里就不赘述了. 首先是gulp的安装. gulp的安装首先需要一个服务器,这里安装了node.js和Git Bash.将两样东西安装好了之后,进入gulp的目录下面,然后右键 点击Git Bash Here. 然后输入node node_modules/gulp/bin/gulp.js -sw进入目录 之后便可以输入指令了,如…

gulp 是基于 node 实现 Web 前端自动化开发的工具,利用它能够极大的提高开发效率. 在 Web 前端开发工作中有很多"重复工作",比如压缩CSS/JS文件.而这些工作都是有规律的.找到这些规律,并编写 gulp 配置代码,让 gulp 自动执行这些"重复工作". **因为 Node 的全局包安装都是在C盘,所有请在C盘使用 gulp 以方便熟悉 gulp **. 目录 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS…

个人比价推崇前后端分离的开发方式,大家伙各司其职,只需通过 API 进行交流,不仅避免了沟通上的成本,更提升了开发效率.而在前端开发工作中,许多需求和问题是相似的,所以我们的开发模式往往是雷同的,是否能够总结出一套通用的模式呢? (备份一个webpack的中文网站:https://angular.cn/docs/ts/latest/guide/webpack.html) 日常前端开发的处境 1. 开发流程相似 ​ 前端开发工作包含哪些?html.css.js,对应的工程目录也相似,每次重新创建都…

本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片 使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目 并将之前所有章节的内容组合起来编写一个前端项目所需的 gulp 代码. 若你不了解npm 请务必阅读 npm模块管理器…

使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转化为代码的过程. 规律 找到 js/ 目录下的所有 js 文件,压缩它们,将压缩后的文件存放在 dist/js/ 目录下. gulp 代码 建议:你可以只阅读下面的代码与注释或同时阅读代码解释 gulp 的所有配置代码都写在 gulpfile…

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 规律 找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. gulp 代码 当熟悉 使用 gulp 压缩 JS的方法后,配置压缩 CSS 的 gulp 代码就变得很轻松. 一.安装 gulp-minify-css 模块 提示:你需要使用命令行的 cd 切…

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin…

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护. 安装 npm install gulp-less 基本用法 // 获取 gulp var gulp = require('gulp') // 获取 gulp-less 模块 var less = require('gulp-less') // 编译less // 在命令行输…

无论是 node-sass 还是 ruby-sass 使用 npm 安装都非常的慢,甚至会装不上.及其不利于团队协作.建议使用 less 作为 css 预处理器. 如果因为 less 不支持自定义函数选择用 sass 可以使用 less-plugin-functions 让 less 支持自定义函数. gulp-sass 本章使用的是 ruby-sass 如果你不方便安装 ruby 或编译速度慢,建议使用 gulp-sass 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用…

gulp, 前端自动化工具, 文件操作, 项目上线之前,将碎片文件合并,将ES6转成ES5,文件压缩,快速搭建服务器... gulp基于node环境 gulp就是node的一个非内置的小模块 gulp操作文件的原理:文件流 前端自动化工具:gulp,webpack,grunt,browserify 使用: 非内置,表示,node默认没有,需要手动下载 node的模块,使用node环境下载,node提供了一种下载方式:npm工具 npm工具怎么用? npm install 工具名 下载 npm u…

你还在为手机上没有忙碌光标而发愁吗?你还在抱怨弹出框组件要依赖zepto/jqery吗?你还在纠结是否要自己写一套还是去网上寻找成现成的UI组件吗?YouA为你轻松解决所有烦恼.YouA是我为移动前端量身打造的一款UI组件,简单,高效,轻量,独立,有良好的扩展特性,走过路过,千万不要错过. 开发背景: 在手机上,多数时候,数据加载都是异步的,为了在页面上给用户一些提示,需要有一个忙碌光标淡化这无聊的数秒钟.如果直接用一个转动的gif图,虽然简单有效,不存在兼容性问题,但是存在以下几个缺点: 1:…

前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前端开发一个更深层次的见解 PS:这不是单一的APP应用,这是一个可以快速批量制作app的一套跨平台解决方案 因为我经常在家同步更新,所以在git上放了一份,并非开源,仅参考学习,请勿乱传播,谢谢配合(当然,没有API,没有文档,估计ES6看起来也够呛)呵呵 定位 开始我们先了解下目前前端的三个大的方…