全局安装gulp,也需要本地安装gulp插件。全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能

//导入工具包 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', 'elseTask']); //定义默认任务 elseTask为其他任务,该示例没有定义elseTask任务 //gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

主要还是配合插件的使用

贴个链接http://www.cnblogs.com/2050/p/4198792.html

https://www.cnblogs.com/Tom-yi/p/8036730.html

自己项目中用的代码,记一下

package.json

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "frank",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.18.13",
"gulp": "^3.9.1",
"gulp-cache": "^0.4.6",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.0.0",
"gulp-file-include": "^1.1.0",
"gulp-imagemin": "^3.3.0",
"gulp-less": "^3.3.2",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.5.0",
"gulp-uglify": "^3.0.0"
}
}

gulpfile.js

/**
* Created by frank on 2017/7/21.
*/
//导入工具包 require('node_modules里对应模块')
// npm install --save-dev gulp gulp-load-plugins gulp-less gulp-livereload gulp-connect gulp-uglify gulp-concat gulp-imagemin gulp-file-include gulp-cache
var gulp = require('gulp'), //本地安装gulp所用到的地方
$ = require('gulp-load-plugins')(); //加载package.json中devDependencies里的插件
console.log($)
var gutil = require('gulp-util'); var htmlSrc = 'src/*.html';
var htmlDist = 'dist'; //定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
gulp.src('src/less/*.less') //该任务针对的文件
.pipe($.less()) //该任务调用的模块
.pipe(gulp.dest(htmlDist+'/static/css')); //将会在src/css下生成index.css
});
gulp.task('css', ['testLess', 'fonts'], function(){
gulp.src(['src/css/base.css','src/css/bootstrap.css','src/css/swiper-3.4.2.min.css'])
.pipe(gulp.dest(htmlDist+'/static/css'));
});
gulp.task('fonts', function(){
gulp.src('src/fonts/*.*')
.pipe(gulp.dest(htmlDist+'/static/fonts'));
}) //定义livereload任务
gulp.task('connect', function () {
$.connect.server({
root: htmlDist,
livereload: true
});
}); //定义html任务
gulp.task('html',['js','images'], function () {
gulp.src(htmlSrc)
.pipe($.fileInclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(htmlDist))
.pipe($.connect.reload());
}); //定义js任务
gulp.task('js', function () {
gulp.src('src/js/*.js')
// .pipe($.uglify())
// .pipe($.concat('jkd.min.js'))
.pipe(gulp.dest(htmlDist+'/static/js'));
}); // Images
gulp.task('images', function() {
gulp.src('src/images/**/*')
.pipe($.cache($.imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest(htmlDist+'/static/images'));
}); //定义看守任务
gulp.task('watch', function () {
$.livereload.listen();//这里需要注意!旧版使用var server = livereload();已经失效
// app/**/*.* 的意思是 app 文件夹下的 任何文件夹 的 任何文件
gulp.watch([htmlDist+'/*.*', htmlDist+'/static/css/*.*'], function(event) {
$.livereload.changed(event.path);
});
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/less/*.less', ['testLess']);
gulp.watch('src/js/*.js', ['js']);
gulp.watch('src/images/**/*', ['images']);
}); gulp.task('default',['html','watch','connect','css']);

gulp使用 笔记的更多相关文章

  1. gulp学习笔记4

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...

  2. gulp学习笔记1

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...

  3. gulp学习笔记2

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...

  4. gulp学习笔记3

    gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...

  5. 前端自动化构建工具 gulp 学习笔记 一、

    一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...

  6. Gulp插件笔记

    初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...

  7. gulp 安装笔记

    1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...

  8. gulp学习笔记

    第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...

  9. gulp使用笔记

    gulp简介 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式 ...

  10. gulp 学习笔记 (初识)

    根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...

随机推荐

  1. 788. Rotated Digits

    X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...

  2. 微信小程序之自定义模态弹窗(带动画)实例

    1.基本需求. 实现用户自定义弹框 带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 获取弹出框的内容,自定义事件获取 2.案例目录结构 二.程序实现具体步骤 1.弹框index.wxml代码 ...

  3. Android退出所有Activity最优雅的方式

    关于退出所有Activity,目前网上比较流行的方式大概有以下几种: ① 使用ActivityManager的方式: ② 自定义一个Activity集合类的方式: ③ 通过发送广播的方式: ④ 通过杀 ...

  4. cookie&session的Q&A故事[原理篇]

    引语:cookie和session在网站开发中,起着无可厚非的重要作用,但是我们平时往往都只是通过某种语言作为介质,通过某些接口函数进行cookie和session的操作,而对其原理可能不了解或一知半 ...

  5. D3.js的一些基础部分 (v3版本)

    最近公司有需求要做一些可视化的功能.之前一直都是用Echarts做的,但是Echarts难以满足我们的需求,经过多方请教,查找发现D3可以满足我们的需求.第一次接触到D3,发现这些图标的可交互性非常丰 ...

  6. Liferay7 BPM门户开发之16: Liferay中用户\站点\组织架构\角色\用户组以及关联关系

    用户 . 站点 . 组织架构 . 角色 . 用户组分别是:Users. Site. Organization. Role. UserGroups Users 用户是Liferay portal中的关键 ...

  7. Spring Cloud Zuul 网关使用与 OAuth2.0 认证授权服务

    API 网关的出现的原因是微服务架构的出现,不同的微服务一般会有不同的服务地址,而外部客户端可能需要调用多个服务的接口才能完成一个业务需求,如果让客户端直接与各个微服务通信,会有以下的问题: 客户端会 ...

  8. Android SD卡读写

    package com.jredu.zuiyou.activity; import android.os.Bundle;import android.os.Environment;import and ...

  9. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发布到Tomcat上运行成功【博主强烈推荐】(图文详解)

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 如果是在eclipse里,则是File -> new ->  ...

  10. ftp 读取目录列表失败

    在防火墙设置的“例外”选项卡中添加程序: C:\WINDOWS\system32\inetsrv\inetinfo.exe,确定即可!