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 Studio 配置 androidAnnotations框架详细步骤
第一步:打开app的build.gradle文件 第二步:添加下面红色的部分 apply plugin: 'com.android.application' android { compileSdkV ...
- 仿B站项目——(1)计划,前端工程
计划 现打算: 计划用webpack打包 + 模板语言 + jquery + jquery ui + bootstrap做一个仿B站的静态网站. 网站兼容手机浏览器端. 部分模块打算仿照SPA用js加 ...
- Bootstrap轮播如何支持移动端左右滑动
一直觉得bootstrap的轮播用起来很好用,代码简单,又支持响应式,不过从来没想过,也不知道原来bootstrap的轮播竟然不支持在手机上左右滑动 解决方法就是:使用滑动手势js插件:hammer. ...
- ARM架构处理器扩展结构-NEON
是适用于ARM Cortex-A系列处理器的一种128位SIMD(Single Instruction, Multiple Data,单指令.多数据)扩展结构. 从智能手机和移动计算设备到HDTV,它 ...
- JSTL-简介
JSTL全称为 JSP Standard Tag Library 即JSP标准标签库. JSTL作为最基本的标签库,提供了一系列的JSP标签,实现了基本的功能:集合的遍历.数据的输出.字符串的处理.数 ...
- RabbitMQ常见错误1
java.lang.IllegalStateException: Invalid configuration: 'exchange' must be non-null. at com.rabbitmq ...
- 【深入 MongoDB 开发】使用正确的姿势连接分片集群
MongoDB分片集群(Sharded Cluster)通过将数据分散存储到多个分片(Shard)上,来实现高可扩展性.实现分片集群时,MongoDB 引入 Config Server 来存储集群的元 ...
- 批量去除文件的BOM头
<?php class KillBom{ //定义扩展名 public static $m_ext = ['txt','php','js','css']; /** * 传入一个任意文件,自动区分 ...
- 一文了解JAVA虚拟机的重要组成
JVM是JAVA平台的重要组成之一,因涉及知识点太多,故从以下几个方面对JVM进行浅层面的介绍,如果需要深入理解,推荐学习机械工业出版社的<深入理解JAVA虚拟机>. 请尊重作者劳动成果, ...
- leetcode — container-with-most-water
/** * Source : https://oj.leetcode.com/problems/container-with-most-water/ * * Created by lverpeng o ...