gulp

1 、安装 nodejs Grunt 和所有 grunt 插件都是基于 nodejs 来运行的， https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本 npm -v 查看 npm 版本 选装 cnpm 1.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常， 如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网： “这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”； 1.2、官方网址： http://npm.taobao.org ； 1.3安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号 cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误； 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm 代替npm）。 2、全局安装 gulp 安装方式： cnpm install gulp -g 执行 gulp -v 查看安装版本 3、创建网站项目 创建项目名称“gulp”子目录为： s rc（源文件） dist （目标文件）

npm，cnpm，yarn这三个或许使用Hexo，Hugo，vuepress等静态博客搭建的小伙伴们来说，会经常遇见，会使用它们进行插件，依赖包等的安装、卸载与更新，如果你是前端开发者或者是准备从事前端的话，你会经常与它们三个打交道，下面简单的说说它们三剑客吧！ npm是什么？ npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。引自 npm中文网 npm (node package manager)是 JavaScript 世界的包管理工具，是 Node.js 平台的默认包管理工具，是 前端模块化 下的一个标志性产物，简单地说，就是 通过npm下载模块，复用已有的代码，提高工作效率。 下面是关于 npm 的快速介绍： npm 由三个独立的部分组成： 网站 注册表（registry） 命令行工具 (CLI) 网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。 注册表 是一个巨大的数据库，保存了每个包（package）的信息。 CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

一、使用场景 使用场景：项目发布前 操作步骤： 1.执行gulp，对文件进行压缩、合并等操作； 2.在1执行完成后，对1中合并的文件如default.css进行多主题色的自动生成，在这里使用node处理。 问题：手工操作步骤繁琐 打开cmd->切换执行目录->执行gulp->关闭cmd（gulp执行后，该窗口不能再执行其他命令）->打开cmd->切换目录->执行node->关闭cmd 需求：使用.bat自动完成上述步骤 二、bat代码 1 @echo off 2 start cmd /k "gulp" 3 start cmd /k "node modifyfile.js" 来源： https://www.cnblogs.com/veritas-sj/p/6409539.html

npm是什么 NPM的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。 npm install 安装模块 基础语法 安装包，默认会安装最新的版本 安装指定版本 npm install gulp@3.9.1 安装包并将信息保持到项目的package.json文件中 项目对模块的依赖可以使用下面的 3 种方法来表示（假设当前版本号是 1.1.0 ）： 兼容模块新发布的补丁版本：~1.1.0、1.1.x、1.1兼容模块新发布的小版本、补丁版本：^1.1.0、1.x、1兼容模块新发布的大版本、小版本、补丁版本：*、x -S, --save 安装包信息将加入到dependencies（生产阶段的依赖） npm install gulp --save 或 npm install gulp -S -D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它 npm install gulp --save-dev 或 npm install gulp -D package.json 文件的 devDependencies字段： "devDependencies": { "gulp": "^3.9.1"} -O, -

原文地址： 使用typescript改造koa开发框架 强类型的 TypeScript 开发体验和维护项目上相比 JavaScript 有着明显的优势，那么对常用的脚手架进行改造也就势在必行了。 接下来开始对基于 koa 框架的 node 后端脚手架进行改造： 项目开发环境 和 typescript 编译环境的搭建； 对 node 、 koa 、koa中间件和使用到的库 添加类型化支持； 基于 typesript 的特性改造项目。 项目开发环境搭建 基于 gulp 搭建开发编译环境， gulp-typescript 插件用于编译 typescript 文件， gulp-nodemon 则可以监控文件内容的变更，自动编译和重启 node 服务，提升开发效率。 npm install -D gulp gulp-nodemon gulp-typescript ts-node typescript gulp 的配置 gulpfile.js 的设置 const { src, dest, watch, series, task } = require('gulp'); const del = require('del'); const ts = require('gulp-typescript'); const nodemon = require('gulp-nodemon'); const

直接进入正题吧。说起来真是好久好久都没有更新过bolg了呢……工作忙起来累成狗。现在辞职在家又懒得动。 环境：mac osx 步骤一：安装node。 这一步就不赘述了。直接上https://nodejs.org/en/ 下载安装就可以了。安装完成后打开终端输入 npm -v 查看是否安装成功。看到版本号即为成功 以下为成功提示： 步骤二：安装gulp。 先全局安装gulp，然后要进入你的每个需要用到gulp的项目里单独安装gulp。 打开“终端”,输入 $ npm install gulp -g 全局安装gulp后cd进入你需要用到gulp的项目文件里。建立一个专属于gulp的文件夹。在这个文件夹里创建package.json，记得加上{}，保存。如图 接着在终端中输入： $ npm install gulp --save-dev上述指令将gulp安装到本地端的项目内，并将记录于package.json内的devDependencies中。步骤三 安装外挂 编译less (gulp-less) Autoprefixer ( gulp-autoprefixer ) 缩小化(minify)CSS ( gulp-minify-css ) JSHint ( gulp-jshint ) 拼接 ( gulp-concat ) 丑化(Uglify) ( gulp-uglify ) 图片压缩 (

Grunt靠边，全新的建构工具来了。Gulp的code-over-configuration不只让撰写任务(tasks)更加容易，也更好阅读及维护。 Glup使用node.js串流(streams)让建构更快速，不须写出资料到硬盘的暂存档案/目录。如果你想了解更多有关串流–虽然不是必须的–你可以阅读 这篇文章 。Gulp利用来源档案当作输入，串流到一群外挂(plugins)，最后取得输出的结果，并非配置每一个外挂的输入与输出–就像Grunt。让我们来看个范例，分别在Gulp及Grunt建构Sass： Grunt: sass: { dist: { options: { style: 'expanded' }, files: { 'dist/assets/css/main.css': 'src/styles/main.scss', } } }, autoprefixer: { dist: { options: { browsers: [ 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ] }, src: 'dist/assets/css/main.css', dest: 'dist/assets/css/main.css' } }, grunt.registerTask(

前提：已经安装有安装了node 和npm 环境 安装gulp 假设已经安装了node 和npm （淘宝的cnpm很适合国内使用）。 1、首页全局安装gulp。 1 npm install --global gulp 2、其次局部安装gulp。（注：局部安装是安装到你项目的根目录，这是很多教程没有清晰表明） npm install gulp --save-dev 3、在项目根目录下创建一个名为 gulpfile.js 的文件 // 引入 gulp及组件 var gulp = require('gulp'); gulp.task('default',function(){ gulp.start('minify'); }); //JS处理 gulp.task("minify",function(){ ... ... }) View Code 4、运行gulp。（默认的名为 default 的任务（task）将会被运行，想要单独执行特定的任务（task），请输入 gulp <task> <othertask>） gulp 5、安装压缩组件 gulp-uglify npm install gulp-uglify --save-dev 在上述 gulpfile.js 的文件里，写入： var gulp = require('gulp'); var uglify = require('gulp

基于nodeJs；通过不同插件能自动完成一系列动作，比如压缩js/css/img、解析模版标签、解析less等； 一、安装gulp 安装nodeJs 打开Node.js command prompt 输入 npm install gulp -g 全局安装gulp 在C盘根目录创建gulpTest文件夹 在命令行使用 cd c:/gulpTest 进入该文件夹 在该文件夹内创建文件package.json(后面会提及该文件作用)，并输入 {"name":"projectName"} ，保存文件 下面开始输入命令局部安装gulp，并写入package.json： npm install gulp --save-dev 安装完毕后，可以看到package.json中已经添加了依赖 经过以上步骤，已经在项目中安装了gulp 二、使用gulp插件压缩css 输入 npm install gulp-minify --save-dev 在项目根目录（c:/gulpTest/）创建gulpfile.js，输入以下代码并保存 var gulp = require('gulp'), minifycss = require('gulp-minify-css'); gulp.task('minifycss', function() { return gulp.src('src/css/*.css') /