const gulp = require('gulp'); const less = require('gulp-less') // 定义任务 gulp.task('helloGulp',function(){ console.log('hello gulp') }) // 运行任务 gulp 任务名称 gulp.task('dest',function(){ gulp.src('./src/*/*.*').pipe(gulp.dest('./dist')) console.log('以转移',…

本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查…

gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省时又方便. 1.合并压缩js文件 为了提高网页的显示速度,最好是将所有的js文件合并成同一个文件,再来引用,这时候可以用到 gulp-concat 插件:进一步,还可以对其进行压缩.但是有时候我们在写js代码的时候,经常用到 console 语句和 debugger 语句.有时候会忘了删除,这时候我…

gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的可以自己百度.在命令行输入 npm install -g gulp 安装完成后可在命令行输入 `gulp -v` 以确认安装成功. 2.压缩js 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作.但如果js文件比较多时候,手动就比较…

gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度. 目标:找到 css/ 目录下的所有 css 文件,压缩它们,将压缩后的文件存放在 dist/css/ 目录下. 在压缩之前,需要安装新的模块,输入以下命令行: npm install gulp-minify-css 在对应目录创建 gulpfile.js 文件并写入如下内容: // 获取 gul…

gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装相应的模块: npm install gulp-ruby-sass 在 gulpfile.js 文件编写如下代码: / 获取 gulp var gulp = require('gulp') // 获取 gulp-ruby-sass…

Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS.  http://nodejs.org/download/ 安装gulp # 安装全局环境 npm install gulp -g #安装本地环境 npm install gulp --save-dev 二.Gulp插件安装 npm install browser-sync gulp-compass gulp-sass gulp-rename gulp-jshi…

gulp快速入门 因为之前一直有人给我推荐gulp,说他这里好哪里好的.实际上对我来说够用就行.grunt熟悉以后实际上他的配置也不难,说到效率的话如果真是要完整打包上线也不在乎那么几秒时间,对于项目来说线上效率关键,但是线下效率只要不是让人无法忍受页没有太多问题.不过不管怎么说,需要亲自用过gulp之后才能品评他和grunt之间的优劣.不废话,直接上实例. 本人自建了一个前端目录结构,后续的例子都是以这个目录结构为准.dest是我们打包压缩结果保存目录,现在是空的.以后每完成一个实例,我们就会…

前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自己做过的技术上,所以有时候有些技术说法对不上,还请看到这篇文章的人指正指正. gulp快速入门&初体验 [toc] 干嘛的 简单的说 前段构建工具 自动化 管理前端代码 gulp 的作用就是帮你处理前端文件, 什么 js 什么 html 什么css 还有json等等前端文件. 麻溜的!自动的!把本该由…

Gulp新手入门教程 原文  http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 当然Gulp能做的远不止这些.如果你够疯狂,你甚至可以使用它搭建一个静态页面生成器.Gulp真的足够强大,但你必须学会驾驭它. 这是这篇文章的主要目的.帮助你了解Gu…