gulp使用 笔记
全局安装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使用 笔记的更多相关文章
- gulp学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
- gulp学习笔记1
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...
- gulp学习笔记2
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
- Gulp插件笔记
初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...
- gulp 安装笔记
1.全局安装cnpm(淘宝的npm国内镜像),gulp,rimraf(卸载用插件)npm install -g cnpm --registry=https://registry.npm.taobao. ...
- gulp学习笔记
第一步:安装Node 首先,gulp 是基于 Nodejs 的自动任务运行器,所以安装gulp之前,最基本也最重要的是,我们需要搭建node环境.访问http://nodejs.org,下载并安装No ...
- gulp使用笔记
gulp简介 gulp 是基于 Nodejs 的自动任务运行器,能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试.检查.合并.压缩.格式 ...
- gulp 学习笔记 (初识)
根据极客学院入门视频整理 一.gulp介绍,主要提到了gulp是基于流式来管理运行的,目前完全搞不懂这一套专业术语. 二.gulp的安装使用. 1.首先需要在全局环境下安装gulp npm insta ...
随机推荐
- Android 使用 HTTPS 问题解决(SSLHandshakeException)
title date categories tags Android 5.0以下TLS1.x SSLHandshakeException 2016-11-30 12:17:02 -0800 Andro ...
- 【Fiddler学习】Fiddler教程,比较经典全面(转)
简介 Fiddler(中文名称:小提琴)是一个HTTP的调试代理,以代理服务器的方式,监听系统的Http网络数据流动,Fiddler可以也可以让你检查所有的HTTP通讯,设置断点,以及Fiddle所有 ...
- 首页背景图片在PC端有显示,在手机端不显示的解决方法
今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...
- MySQL mysqlbinlog 访问mysql-bin日志出错
问题 mysqlbinlog -v -v --base64-output=DECODE-ROWS mysql-bin.000166 | less ERROR: Error in Log_event:: ...
- IOS 整体框架类图值得收藏
Cocoa框架是iOS应用程序的基础,了解Cocoa框架,对开发iOS应用有很大的帮助. 1.Cocoa是什么? Cocoa是OS X和 iOS操作系统的程序的运行环境. 是什么因素使一个程序成为Co ...
- django-pure-pagination实现分页
django-pure-paginations是一个第三方的分页插件 安装 django-pure-pagination pip install django-pure-pagination 在set ...
- Redis学习系列七分布式锁
一.简介 熟悉.Net多线程的都知道,当多个线程同时操作一个全局缓存对象(static对象实例.Dictionary.List等)时,会存在多线程争用问题,包括EF.Dapper等本身的缓存机制,都存 ...
- rfc2818 --- HTTP Over TLS
协议链接 本协议描述了如何使用TLS来对Internet上的HTTP进行安全加固. 2.1. Connection Initiation(链接初始化) HTTP client同时也作为TLS clie ...
- Spring Framework简介
作者关于此主题早期文章 Spring框架快速入门 起源 要谈Spring的历史,就要先谈J2EE.J2EE应用程序的广泛实现是在1999年和2000年开始的,它的出现带来了诸如事务管理之类的核心中间层 ...
- Android中不能在子线程中更新View视图的原因
这是一条规律,很多coder知道,但原因是什么呢? 如下: When a process is created for your application, its main thread is ded ...