Note ---- About Gulp

1.配置node环境

http://nodejs.cn/download/

node -v

npm -v

2.安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v 

3.新建package.json

package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;

cnpm init

npm init

4.全局安装gulp

$ cnpm install gulp -g

$ npm install --global gulp

gulp -v

5.本地安装gulp插件

全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能
进入你的项目文件路径中后,执行

$ cnpm install gulp --save-dev 

$ npm install gulp --save-dev 

 

6.安装gulp-sass插件

(拿该插件进行示例)进入你的项目文件路径中后,执行

cnpm install gulp-sass --save-dev

安装插件:

自动添加css前缀( gulp-autoprefixer )

压缩css( gulp-minify-css ) 

js代码校验( gulp-jshint )

合并js文件( gulp-concat ) 

压缩js代码( gulp-uglify ) 

压缩图片( gulp-imagemin ) 

自动刷新页面( gulp-livereload ) 

图片缓存,只有图片替换了才压缩( gulp-cache ) 

更改提醒( gulp-notify ) 

清除文件( del )

7.新建gulpfile.js

//导入工具包 require(‘node_modules里对应模块‘)
var gulp = require(‘gulp‘), //本地安装gulp所用到的地方
    less = require(‘gulp-less‘);  

//定义一个testLess任务(自定义任务名称)
gulp.task(‘testLess‘, function () {
    gulp.src(‘src/less/index.less‘) //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css
});  

gulp.task(‘default‘,[‘testLess‘]); //定义默认任务  

//gulp.task(name[, deps], fn) 定义任务  name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

 

8.运行gulp

9.通过命令提示符运行gulp任务

时间: 2024-10-26 17:45:30

Note ---- About Gulp的相关文章

解决Linux下gulp中events.js:72的问题

晚上在Linux下搭建环境,代码都下好了,gulp也在全局装好了,按照在Windows下的习惯,直接在目录下敲gulp,结果抛出异常了. 开始还以为是权限问题,用了sudo发现没用,就去看了看gulpfile.js,内容如下: 'use strict'; var gulp = require('gulp'); var g = require('gulp-load-plugins')({lazy: false}); var inject = require('gulp-inject'); var 

优秀网站看前端 —— 小米Note介绍页面

刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的坑,不过咱挂个优雅点的名字——“优秀网站看前端”,顾名思义的,也是寻觅一些值得玩味的趣味网站,来学习它们的前端技术和交互理念. 作为本系列的开篇,我们拿“买手机送国土”的小米来打头阵,缘由是鄙人有着更换手机的打算又刚好看上小米note高配版,于是逛了下小米note的介绍页面,感觉交互做的挺不错,特别

gulp使用详解

gulp提供了四个接口 gulp.src gulp.dest gulp.task gulp.watch ++++++++++++++++++++= gulp.src(globs[,options]) [所谓的 glob 模式是指 shell 所使用的简化了的正则表达式] 该方法就是使用匹配模式获取到相关的文件,例如js,css,image等,然后连接(pipe)输送到相关的插件去做自动化处理. gulp.src('client/templates/*.jade') .pipe(jade()) .

(转载)前端构建工具gulp使用

前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://github.com/lisposter/gulp-docs-zh-cn Gulp插件网 http://gulpjs.com/plugins/ Awesome Gulp https://github.com/alferov/awesome-gulp StuQ-Gulp实战和原

自动构建工具Gulp

摘要:  gulp与grunt一样,都是自动构建工具.和grunt相比它更突出一个流的概念,任务是一个接一个执行的.今天就分享如何用gulp做自动化. 安装: gulp也是基于node环境,所以安装gulp之前你需要安装node.js.  npm install -g gulp 只要在命令窗口中执行上面一行命令就完成安装,这样安装的是全局安装.在项目中一般是通过package.json中的devDependencies属性来安装.如下: { "name": "",

GULP 快速上手教程

GULP gulp是前端开发过程中对代码进行构建的工具她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率.       gulp是基于Nodejs的自动任务运行器,她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上,她借鉴了Un

gulp教程(sass,livereload,md5,css压缩,js压缩,img的base64)

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

gulp插件的使用方法

gulp插件很多,这里介绍几个比较常用的插件... 1.gulp-less:用于把less文件编译成css文件. 因为html文件中不能直接引用less文件(需要导入相关编译js文件配合才行),因此需要想方设法把相应less文件编译成less文件编译成css文件.除了考拉编译外,还可以通过gulp这个自动化构建工具实现less文件的编译. 在用gulp编译前,首先你需要安装node.js.gulp是基于node.js,理所当然需要安装node.js.npm(node package manage

git上传文件到github与gulp的简单使用

git有两种方式提交源代码到github 第一种方式通过地址提交下面介绍的是通过ssh方式上传 git使用ssh方式上传代码到githubgit首先要生成公钥和私钥 将公钥添加到github中将私钥保存在本地 + 命令:`ssh-keygen -t rsa`生成的公钥与私钥文件会在当用户目录的.ssh目录下. 把代码push到服务器时需要先pull一下(pull的作用是从远程下载git项目里的文件,然后将文件与本地的分支进行merge) git pull和gitclone区别:git pull