本文介绍Gulp自动化构建工具的基本使用方法，包括安装配置、常用插件及其功能、项目目录结构设计等内容，适合初学者快速上手。
gulp例子：https://github.com/Aquarius1993/gulpDemo
淘宝镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
一 入门：
npm: node package manager(前提是安装了node)
1.1 全局安装 npm install --global gulp
1.2 作为项目依赖安装 npm install --save--dev gulp
1.3 在项目根目录下创建一个名为 gulpfiel.js 的文件
var gulp = require('gulp');
gulp.task('defalut',function () {
// body...
});
mac用户需要管理员的身份才能全局安装，所以：sudo npm install gulp -g
二 选择gulp组件
通过
gulp plugins，寻找对于的gulp组件
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass
gulp-less：编译less
gulp-minify-css: 压缩css 在minicss()中加
"compatibility": "ie7"
gulp-cssnano:压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-cssnano:压缩css
Browser Sync 帮助我们搭建简单的本地服务器并能实时刷新浏览器 它还能
同时刷新多个设备
gulp-useref会将多个文件拼接成单一文件，并输出到相应目录。
安装组件： npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
三 项目目录结构
project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片)
|–js js文件(main.js main.min.js)
|–index.html 静态文件(压缩html)
|–src 生产环境
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–.jshintrc jshint配置文件
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片)
|–js js文件(main.js main.min.js)
|–index.html 静态文件(压缩html)
|–src 生产环境
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–.jshintrc jshint配置文件
|–gulpfile.js gulp任务文件
四 基础语法
gulp通过gulpfile.js文件来完成相关任务，所以项目中必须包含gulpfile.js
gulp有5个方法：src dest task run watch
src dest:指定源文件和处理后文件的路径
watch 用来监听文件的变化
task 指定任务
run 执行任务
五 创建Gulp项目
在项目文件夹下执行 npm init
作用是：会在项目本地建立一个package.json文件，用来保存项目的各种依赖，终端的提示都可默认。
创建完之后，我们执行下面的命令：npm install gulp --save-dev（在package中添加gulp依赖）
六 编写gulp任务
/*
* @Author: liheyao
* @Date: 2016-10-25 10:56:42
* @Last Modified by: liheyao
* @Last Modified time: 2016-10-25 16:15:32
*/
//引入gulp和组件
var gulp = require('gulp'),//gulp基础库
gulpLoadPlugins = require('gulp-load-plugins'),//引入依赖插件
del = require('del'),// 文件夹删除清空
// 实时刷新
tinylr = require('tiny-lr'),
browerSync = require('browser-sync'),
server = tinylr(),
port = 3080;
// load all gulp plugins
var plugins = gulpLoadPlugins(), //package.json中的gulp依赖项
env = process.env.NODE_ENV || 'development',//开发环境 dev 还是pro
isProduction = env == 'production',
ipJS = isProduction ? "src/js/dev.js":"src/js/pro.js";//根据不同的开放环境引入不同的js
/** css,js缓存配置 **/
var time = new Date();
var timeStamp = dateToString(time);
var timeStamp_prod = time.valueOf();
function dateToString(time) {
var year = time.getYear() + 1900;
var month = time.getMonth() + 1; //月
var day = time.getDate(); //日
var hh = time.getHours(); //时
var mm = time.getMinutes(); //分
var str= year + "-";
if(month < 10){
str += "0";
}
str += month + "-";
if(day < 10)
str += "0";
str += day + " ";
str += hh + ':';
str += mm;
return(str);
}
//html处理
gulp.task('html',function(){
gulp.src('src/*.html')
// 判断 如果是pro 压缩html
.pipe(plugins.if(isProduction, plugins.htmlmin({
collapseWhitespace: true,//空白
removeComments: true//注释
})))
// 判断 如果是pro 加时间戳
.pipe(plugins.if(isProduction, plugins.replace(/_VERSION_/gi, '.min_'+timeStamp_prod), plugins.replace(/_VERSION_/gi, '.min')))
.pipe(gulp.dest('dist/'))
// 实时监听
.pipe(browerSync.reload({
stream: true
}));
});
//sass
gulp.task('sass',function () {
// 多个路径用中括号
gulp.src(['src/sass/*.scss','!src/sass/_*.scss'])
// 编辑scss
.pipe(plugins.sass())
// 合并css
.pipe(plugins.concat('index.css'))
// 判断 如果是pro 压缩
.pipe(plugins.if(isProduction,plugins.minifyCss()))
// 判断 如果是pro 加时间戳
.pipe(plugins.if(isProduction,plugins.rename({suffix:'.min_'+timeStamp_prod}),plugins.rename({suffix:'.min'})))
.pipe(gulp.dest('dist/css'))
.pipe(browerSync.reload({
stream: true
}));
});
//图片处理
gulp.task('image',function(){
gulp.src('src/images/*.*')
.pipe(plugins.imagemin())
.pipe(gulp.dest('dist/images'))
.pipe(browerSync.reload({
stream: true
}));
});
//js处理
gulp.task('js',function () {
gulp.src(['src/js/*.js',"!"+ipJS+""])
.pipe(plugins.babel())
.pipe(plugins.concat('main.js'))
.pipe(plugins.if(isProduction,plugins.uglify()))
.pipe(plugins.if(isProduction,plugins.rename({suffix:'.min_'+timeStamp_prod}),plugins.rename({suffix:'.min'})))
.pipe(gulp.dest('dist/js'))
.pipe(browerSync.reload({
stream:true
}));
});
gulp.task('libs',function() {
gulp.src('src/libs/**/*')
.pipe(gulp.dest('dist/libs'))
.pipe(browerSync.reload({
stream:true
}));
})
//清空图片 样式 js
gulp.task('clean', del.bind(null, ['dist/*']));
// 实时监听
gulp.task('serve',function(){
browerSync({
server:{
baseDir:['dist']
},
port: port
},function(err,bs){
console.log(bs.options.getIn(["urls", "local"]));
});
gulp.watch('src/sass/*.scss',['sass']);
gulp.watch('src/js/*.js',['js']);
gulp.watch('src/*.html',['html']);
gulp.watch('src/images/*.*',['image']);
});
gulp.task('build',['clean'],function() {
gulp.start('libs','sass','js','html','image')
})
package.json
{
"name": "gulp",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"watch": "gulp serve",
"dev": "cross-env gulp build",
"build": "cross-env NODE_ENV=production gulp build"
},
"author": "lhy",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.16.0",
"browser-sync": "^2.17.5",
"cross-env": "^3.1.2",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.1",
"gulp-imagemin": "^3.0.3",
"gulp-load-plugins": "^1.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"rename": "^1.0.3",
"tiny-lr": "^1.0.2"
}
}
启动监听的另一种方法：
http://www.dbpoo.com/getting-started-with-gulp/ 网站上提到的
http-server方式
gulp 自动化编程
1.命令行创建npm的配置文件
nam init
2.添加一个gulp的依赖
npm install gulp - - save-dev
3.在项目根目录下添加一个gulpfile.js文件 ，这个文件名是固定不变的
4.在gulpfile.js中添加任务
eg: 1.less编译 压缩 合并（没有必要，一般预处理css都是导包）
2.js合并 压缩 混淆
3.img复制
4.html压缩
//先载入gulp的包
var gulp = require（‘gulp’）;
//注册任务
//安装 gulp-less gulp-concat 等包
//引入gulp-less 包 转css用的
var less = require(‘gulp-less’);
//引入gulp-cssnano包 压缩用的
var cssnano = require(‘gulp-cssnano’);
gulp.task(‘style’,function(){
gulp.src(［’src/styles/*.less’,’!src/styles/_*.less’］)
.pipe(less())//转css
.pipe(cssnano())//压缩
//合并
.pipe(gulp.dest(‘dist/styles’));
});
扫一扫
724
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
