项目流程

安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务

常用命令简介:

node -v 查看node版本
npm -v 查看npm版本
cd 定位到目录,用法:cd + 路径 ;
dir 列出文件列表;
cls 清空命令提示符窗口内容

安装包
npm install <name> [-g] [--save-dev]
-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;  非全局安装:将会安装在当前定位目录;  全局安装可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹下,通过require()调用;
--save:将保存配置信息至package.json(package.json是nodejs项目配置文件);
-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;
为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可(命令提示符执行npm install,则会根据package.json下载所有需要的包)。

安装指定版本包
npm install -g npm@3.5

更新插件
npm update <name> [-g] [--save-dev]

删除插件
npm uninstall <name> [-g] [--save-dev]

生成package.json
npm init

安装本地插件
npm install [name] --save-dev


以下为测试“gulp-livereload”浏览器自动刷新代码:

谷歌浏览器或火狐安装livereload插件(必须此插件方能生效)
安装方法:谷歌浏览器安装crx插件方法、火狐浏览器直接将xpi文件拖进浏览器即可安装。点击下载(谷歌为.crx文件,火狐为.xpi文件)

注:安装方法在chrome测试通过,firefox安装时提示未通过验证,不支持IE。

package.json

 {
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-livereload": "^3.8.1"
}
}

gulpfile.js

 // 监听all变化
var gulp = require('gulp'), //本地安装gulp所用到的地方
livereload = require('gulp-livereload');
gulp.task('All', function() {
gulp.src('src/**')
.pipe(livereload());
});
gulp.task('watchAll', function() {
livereload.listen();
gulp.watch('src/**', ['All']);
});
//gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数
//gulp.src(globs[, options]) 执行任务处理的文件 globs:处理的文件路径(字符串或者字符串数组)
//gulp.dest(path[, options]) 处理完后文件生成路径

cd到当前目录,执行命令“gunp watchAll”。

运行项目http://localhost/....,注意,必须使用http[s]协议,file协议不生效。

当修改src目录里面文件时,浏览器会自动刷新。

现项目中使用的gulpfile.js

 var gulp = require("gulp")
, gutil = require("gulp-util") , del = require("del")
, sass = require("gulp-sass")
, uglify = require('gulp-uglify')
, rename = require("gulp-rename") , browserSync = require("browser-sync").create()
, reload = browserSync.reload , sequence = require("run-sequence")
, plumber = require("gulp-plumber")
, watch = require("gulp-watch") , through2 = require("through2")
, path = require("path")
, fs = require("fs"); // #############################################
// # init params // 收集参数
var cwd = process.cwd();
var cmdargs = process.argv.slice(2);
var cmdname = cmdargs.shift();
var cmdopts = {};
var srcpath = "./src";
var distpath = "./dist"; while (cmdargs.length) {
var key = cmdargs.shift().slice(2);
var val = cmdargs.shift();
cmdopts[key] = key === "src" || key === "dist" ? normalizePath(val) : val;
} // 参数配置
var release = cmdname === "release";
var reloadTimer = null;
var devport = 5678;
var paths = {
src: path.join(__dirname, srcpath),
dist: path.join(__dirname, distpath)
} function normalizePath(url) {
if (url.charAt(0) === "/" || url.indexOf(":") > -1) {
return path.normalize(url);
}
return path.normalize(path.join(cwd, url));
} function setOptions(cmd, cmdopts) {
if (cmd === "start") {
paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
} else if (cmd === "release") {
paths.src = cmdopts.src ? path.join(cmdopts.src, srcpath) : paths.src;
paths.dist = cmdopts.dist ? cmdopts.dist : path.normalize(paths.src + "/../" + distpath);
}
} function showUsage() {
console.log("Usage:\n");
console.log(" gulp 显示帮助");
console.log(" gulp help 显示帮助");
console.log(" gulp start --src src 在--src目录下自动化开发调试环境");
console.log(" gulp release --src src --dist dist 构建--src线上版本到--dist目录\n");
console.log(" gulp start --src src --proxy localhost 使用gulp代理localhost请求,并且实时监听src文件修改");
} // #############################################
// # default tasks // # clean path
gulp.task("clean:dist", function () {
return del([paths.dist], {force: true});
}); // # 编译css
gulp.task("sass", function() {
var base = paths.src;
var dest = base;
return gulp.src(base + "/**/*.scss", {base: base})
.pipe(plumber())
.pipe(sass({
precision: 2,
outputStyle: release ? "compressed" : "expanded"
//sourceComments: release ? false : true
})
.on("error", sass.logError))
.pipe(gulp.dest(dest));
}); // # 压缩js
gulp.task("uglify", function() {
var base = paths.src;
var dest = paths.dist;
return gulp.src(base + "/**/*.js", {base: base})
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest(dest));
}); // # 复制静态资源
gulp.task("copy:dist", function() {
var base = paths.src;
var dest = paths.dist;
return gulp.src([
base + "/**/*",
"!" + base + "/**/*.js",
"!" + base + "/**/*.scss"
], {base: base})
.pipe(gulp.dest(dest));
}); // # serv & watch
gulp.task("server", function() {
// start server
browserSync.init({
ui: false,
notify: false,
port: devport,
// 设置代理请求
proxy: cmdopts.proxy,
server: !cmdopts.proxy ? {
baseDir: paths.src
} : false
}); // # watch src资源, 调用相关任务预处理
watch(paths.src + "/**/*.scss", function(obj) {
sequence("sass");
}); // # 刷新浏览器
// # 限制浏览器刷新频率
watch(paths.src + "/**/*", function(obj) {
var url = obj.path.replace(/\\/g, "/");
var absurl = url;
url = path.relative(paths.src, url);
console.log("[KS] " + absurl); // skip scss
if (!/\.scss$/.test(url)) {
if (reloadTimer) {
clearTimeout(reloadTimer);
}
reloadTimer = setTimeout(reload, 1000);
}
});
}); // #############################################
// # public task gulp.task("default", showUsage);
gulp.task("help", showUsage); gulp.task("start", function(cb) {
release = false;
setOptions("start", cmdopts);
sequence("sass", "server", cb);
}); gulp.task("release", function(cb) {
release = true;
setOptions("release", cmdopts);
sequence("clean:dist", ["sass", "uglify"], "copy:dist", cb);
});

package.json

 {
"name": "work",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.3.6",
"autoprefixer-core": "^6.0.1",
"browser-sync": "^2.13.0",
"cssgrace": "^3.0.0",
"cssnext": "^1.8.4",
"del": "^2.2.1",
"fs": "^0.0.2",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^2.0.0",
"gulp-imagemin": "^3.0.1",
"gulp-jshint": "^2.0.1",
"gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-minify-css": "^1.2.4",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-postcss": "^6.1.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^1.5.3",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.8",
"imagemin-jpegtran": "^5.0.2",
"imagemin-pngcrush": "^5.0.0",
"jshint": "^2.9.2",
"path": "^0.12.7",
"run-sequence": "^1.2.1",
"through2": "^2.0.1"
}
}

gulp初体验的更多相关文章

  1. gulp初体验记录(简介、插件开发介绍)

    目前用的业界比较知名的三个前端构建工具:grunt.gulp.fis,自己此前一直都是只在用grunt,fis看过一点,gulp则一直都没注意过,直到最近发现好像用的人越来越多,所以今天也就抽了点时间 ...

  2. gulp 初体验

    1,全局安装 gulp npm install --global gulp 但是一直无法成功,后来才知被墙了,于是使用了如下命令,安装cnpm npm install -g cnpm --regist ...

  3. 前端工业化工具Gulp初体验

    1. 全局安装 gulp: npm install --global gulp 2.在项目目录下,用以下命令创建一个基本的package.json文件 npm init 3.安装Gulp npm in ...

  4. gulp快速入门&初体验

    前言 一句话先 gulp 是一个可以简单和自动化"管理"前端文件的构建工具 先说我以前的主要工作,我主要是做游戏服务端的,用c++/python,所以我对东西的概念理解难免要套到自 ...

  5. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  6. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  7. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  8. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  9. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

随机推荐

  1. 在linux系统下安装两个nginx以及启动、停止、重起

    如果没有安装过nginx请看:linux下nginx部署以及配置详解 1.第一个nginx已经安装完成后,现在安装第二个nginx 启动:sudo /usr/sbin/nginx3 重起:sudo / ...

  2. 在Centos7中创建.net core 项目,并用Apache做代理服务器部署.net core项目

    这一篇实例记录一次用Centos7创建并部署.net core项目的过程,希望能帮到用到的小伙伴. Kestrel 是 ASP.NET Core 项目模板中包括的默认 Web 服务器,Kestrel可 ...

  3. KindEditor 简单使用笔记

    1.在官网下载最新版本  http://kindeditor.net/demo.php 2.在页面中加上如下代码 <textarea id="editor_id" name= ...

  4. MVC学习笔记(三)—用EF向数据库中添加数据

    1.在EFDemo文件夹中添加Controllers文件夹(用的是上一篇MVC学习笔记(二)—用EF创建数据库中的项目) 2.在Controllers文件夹下添加一个空的控制器(StudentsCon ...

  5. ElementUI table中el-table-column怎么设置百分比显示。

    看文档找到一种方法,是把 width 换成 min-width ,就支持百分比显示啦 !

  6. 【高并发解决方案】8、Nginx/LVS/HAProxy负载均衡软件的优缺点详解

    PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验,总结一下. 一般对负载均衡的使用是随着网站规模的提升根据不 ...

  7. Python的bytes和str

    Python和C的字符串 在Python 3 中,bytes单独作为一个类型,不再和str类型混在一起.关于字符串和字节,我想先回顾下C/C++ 在C/C++中,字符串是由char数组构成,每个元素是 ...

  8. 【面试突击】-Redis常见面试题(一)

    介绍:Redis 是一个开源的使用 ANSI C 语言编写.遵守 BSD 协议.支持网络.可基于内存亦可持久化的日志型.Key-Value 数据库,并提供多种语言的 API的非关系型数据库. 传统数据 ...

  9. jQuery设置样式css

    一.设置单个样式 $('.div').css('padding-top','8.6rem'); 二.设置多个样式 $('.div').css({'width': "240px",' ...

  10. 在eclipse下给android应用添加jar包

    右键工程,Build path,java build path,选择libraries在右边的按钮中点击“Add Library”选择“User library”,点击“下一步”点击“User lib ...