|
| 1 | +# Gulp快速入门教程 |
| 2 | + |
| 3 | +* Gulp介绍 |
| 4 | + |
| 5 | + * 中文主页: http://www.gulpjs.com.cn/ |
| 6 | + * gulp是与grunt功能类似的**前端项目构建**工具, 也是基于Nodejs的自动**任务运行器** |
| 7 | + * 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的 |
| 8 | + 合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务 |
| 9 | + * gulp更高效(异步多任务), 更易于使用, 插件高质量 |
| 10 | + |
| 11 | +* 安装 nodejs, 查看版本: node -v |
| 12 | + |
| 13 | +* 创建一个简单的应用gulp_test |
| 14 | + ``` |
| 15 | + |- dist |
| 16 | + |- src |
| 17 | + |- js |
| 18 | + |- css |
| 19 | + |- less |
| 20 | + |- index.html |
| 21 | + |- gulpfile.js-----gulp配置文件 |
| 22 | + |- package.json |
| 23 | + { |
| 24 | + "name": "gulp_test", |
| 25 | + "version": "1.0.0" |
| 26 | + } |
| 27 | + ``` |
| 28 | + |
| 29 | +* 安装gulp: |
| 30 | + * 全局安装gulp |
| 31 | + ``` |
| 32 | + npm install gulp -g |
| 33 | + ``` |
| 34 | + * 局部安装gulp |
| 35 | + ``` |
| 36 | + npm install gulp --save-dev |
| 37 | + ``` |
| 38 | + * 配置编码: gulpfile.js |
| 39 | + ``` |
| 40 | + //引入gulp模块 |
| 41 | + var gulp = require('gulp'); |
| 42 | + //定义默认任务 |
| 43 | + gulp.task('任务名', function() { |
| 44 | + // 将你的任务的任务代码放在这 |
| 45 | + }); |
| 46 | + gulp.task('default', ['任务'])//异步执行 |
| 47 | + ``` |
| 48 | + * 构建命令: |
| 49 | + ``` |
| 50 | + gulp |
| 51 | + ``` |
| 52 | +
|
| 53 | +* 使用gulp插件 |
| 54 | + * 相关插件: |
| 55 | + * gulp-concat : 合并文件(js/css) |
| 56 | + * gulp-uglify : 压缩js文件 |
| 57 | + * gulp-rename : 文件重命名 |
| 58 | + * gulp-less : 编译less |
| 59 | + * gulp-clean-css : 压缩css |
| 60 | + * gulp-livereload : 实时自动编译刷新 |
| 61 | + * 重要API |
| 62 | + * gulp.src(filePath/pathArr) : |
| 63 | + * 指向指定路径的所有文件, 返回文件流对象 |
| 64 | + * 用于读取文件 |
| 65 | + * gulp.dest(dirPath/pathArr) |
| 66 | + * 指向指定的所有文件夹 |
| 67 | + * 用于向文件夹中输出文件 |
| 68 | + * gulp.task(name, [deps], fn) |
| 69 | + * 定义一个任务 |
| 70 | + * gulp.watch() |
| 71 | + * 监视文件的变化 |
| 72 | + * 处理js |
| 73 | + * 创建js文件 |
| 74 | + * src/js/test1.js |
| 75 | + ``` |
| 76 | + (function () { |
| 77 | + function add(num1, num2) { |
| 78 | + var num3 = 0; |
| 79 | + num1 = num2 + num3; |
| 80 | + return num1 + num2; |
| 81 | + } |
| 82 | + console.log(add(10, 30)); |
| 83 | + })(); |
| 84 | + ``` |
| 85 | + * src/js/test2.js |
| 86 | + ``` |
| 87 | + (function () { |
| 88 | + var arr = [2,3,4].map(function (item, index) { |
| 89 | + return item+1; |
| 90 | + }); |
| 91 | + console.log(arr); |
| 92 | + })(); |
| 93 | + ``` |
| 94 | + * 下载插件: |
| 95 | + ``` |
| 96 | + npm install gulp-concat gulp-uglify gulp-rename --save-dev |
| 97 | + ``` |
| 98 | + * 配置编码 |
| 99 | + ``` |
| 100 | + var concat = require('gulp-concat'); |
| 101 | + var uglify = require('gulp-uglify'); |
| 102 | + var rename = require('gulp-rename'); |
| 103 | + |
| 104 | + gulp.task('minifyjs', function() { |
| 105 | + return gulp.src('src/js/*.js') //操作的源文件 |
| 106 | + .pipe(concat('built.js')) //合并到临时文件 |
| 107 | + .pipe(gulp.dest('dist/js')) //生成到目标文件夹 |
| 108 | + .pipe(rename({suffix: '.min'})) //重命名 |
| 109 | + .pipe(uglify()) //压缩 |
| 110 | + .pipe(gulp.dest('dist/js')); |
| 111 | + }); |
| 112 | + |
| 113 | + gulp.task('default', ['minifyjs']); |
| 114 | + ``` |
| 115 | + * 页面引入js浏览测试 : index.html |
| 116 | + ``` |
| 117 | + <script type="text/javascript" src="dist/js/built.min.js"></script> |
| 118 | + ``` |
| 119 | + * 打包测试: gulp |
| 120 | + * 处理css |
| 121 | + * 创建less/css文件 |
| 122 | + * src/css/test1.css |
| 123 | + ``` |
| 124 | + #div1 { |
| 125 | + width: 100px; |
| 126 | + height: 100px; |
| 127 | + background: green; |
| 128 | + } |
| 129 | + ``` |
| 130 | + * src/css/test2.css |
| 131 | + ``` |
| 132 | + #div2 { |
| 133 | + width: 200px; |
| 134 | + height: 200px; |
| 135 | + background: blue; |
| 136 | + } |
| 137 | + ``` |
| 138 | + * src/less/test3.less |
| 139 | + ``` |
| 140 | + @base: yellow; |
| 141 | + .index1 { color: @base; } |
| 142 | + .index2 { color: green; } |
| 143 | + ``` |
| 144 | + * 下载插件: |
| 145 | + ``` |
| 146 | + npm install gulp-less gulp-clean-css --save-dev |
| 147 | + ``` |
| 148 | + * 配置编码 |
| 149 | + ``` |
| 150 | + var less = require('gulp-less'); |
| 151 | + var cleanCSS = require('gulp-clean-css'); |
| 152 | + |
| 153 | + //less处理任务 |
| 154 | + gulp.task('lessTask', function () { |
| 155 | + return gulp.src('src/less/*.less') |
| 156 | + .pipe(less()) |
| 157 | + |
| 158 | + .pipe(gulp.dest('src/css')); |
| 159 | + }) |
| 160 | + //css处理任务, 指定依赖的任务 |
| 161 | + gulp.task('cssTask',['lessTask'], function () { |
| 162 | + |
| 163 | + return gulp.src('src/css/*.css') |
| 164 | + .pipe(concat('built.css')) |
| 165 | + .pipe(gulp.dest('dist/css')) |
| 166 | + .pipe(rename({suffix: '.min'})) |
| 167 | + .pipe(cleanCSS({compatibility: 'ie8'})) |
| 168 | + .pipe(gulp.dest('dist/css')); |
| 169 | + }); |
| 170 | + |
| 171 | + gulp.task('default', ['minifyjs', 'cssTask']); |
| 172 | + ``` |
| 173 | + * 页面引入css浏览测试 : index.html |
| 174 | + ``` |
| 175 | + <link rel="stylesheet" href="dist/css/built.min.css"> |
| 176 | + <div id="div1" class="index1">div1111111</div> |
| 177 | + <div id="div2" class="index2">div2222222</div> |
| 178 | + ``` |
| 179 | + * 打包测试: gulp |
| 180 | + * 处理html |
| 181 | + * 下载插件: |
| 182 | + ``` |
| 183 | + npm install gulp-htmlmin --save-dev |
| 184 | + ``` |
| 185 | + * 配置编码 |
| 186 | + ``` |
| 187 | + var htmlmin = require('gulp-htmlmin'); |
| 188 | + //压缩html任务 |
| 189 | + gulp.task('htmlMinify', function() { |
| 190 | + return gulp.src('index.html') |
| 191 | + .pipe(htmlmin({collapseWhitespace: true})) |
| 192 | + .pipe(gulp.dest('dist')); |
| 193 | + }); |
| 194 | + gulp.task('default', ['minifyjs', 'cssTask', 'htmlMinify']); |
| 195 | + ``` |
| 196 | + * 修改页面引入 |
| 197 | + ``` |
| 198 | + <link rel="stylesheet" href="css/built.min.css"> |
| 199 | + <script type="text/javascript" src="js/built.min.js"></script> |
| 200 | + ``` |
| 201 | + * 打包测试: gulp |
| 202 | + * 自动编译 |
| 203 | + * 下载插件 |
| 204 | + ``` |
| 205 | + npm install gulp-livereload --save-dev |
| 206 | + ``` |
| 207 | + * 配置编码: |
| 208 | + ``` |
| 209 | + var livereload = require('gulp-livereload'); |
| 210 | + |
| 211 | + //所有的pipe |
| 212 | + .pipe(livereload()); |
| 213 | + |
| 214 | + gulp.task('watch', ['default'], function () { |
| 215 | + //开启监视 |
| 216 | + livereload.listen(); |
| 217 | + //监视指定的文件, 并指定对应的处理任务 |
| 218 | + gulp.watch('src/js/*.js', ['minifyjs']) |
| 219 | + gulp.watch(['src/css/*.css','src/less/*.less'], ['cssTask','lessTask']); |
| 220 | + }); |
| 221 | + ``` |
| 222 | + |
| 223 | + * 热加载(实时加载) |
| 224 | + * 下载插件：gulp-connect |
| 225 | + ``` |
| 226 | + 1、 npm install gulp-connect --save-dev |
| 227 | + 2、 注册 热加载的任务 server，注意依赖build任务 |
| 228 | + 3、注册热加载的任务 |
| 229 | + //配置加载的选项 |
| 230 | + connect.server({ |
| 231 | + root : 'dist/',//提供服务的根路径 |
| 232 | + livereload : true,//是否实时刷新 |
| 233 | + port : 5000//开启端口号 |
| 234 | + }); |
| 235 | + // 自动开启链接 |
| 236 | + open('http://localhost:5000');//npm install open --save-dev |
| 237 | + // 监视目标文件 |
| 238 | + gulp.watch('src/js/*.js', ['js']); |
| 239 | + gulp.watch(['src/css/*.css', 'src/css/*.less'], ['cssMin', 'less']); |
| 240 | + ``` |
| 241 | + |
| 242 | + * 扩展 |
| 243 | + * 打包加载gulp插件 |
| 244 | + * 前提：将插件下载好。 |
| 245 | + * 下载打包插件： gulp-load-plugins |
| 246 | + * npm install gulp-load-plugins --save-dev |
| 247 | + * 引入： var $ = require('gulp-load-plugins')();！！！引入的插件是个方法，必须记住调用。 |
| 248 | + * 神来之笔：其他的插件不用再引入了 |
| 249 | + * 使用方法： |
| 250 | + ``` |
| 251 | + * 所有的插件用 $ 引出，其他插件的方法名统一为插件的功能名字(即插件名字的最后一部分)：如：concat,connect,cssmin... |
| 252 | + gulp.task('lib', function() { |
| 253 | + gulp.src('bower_components/**/*.js') |
| 254 | + .pipe(gulp.dest(app.devPath + 'vendor')) |
| 255 | + .pipe(gulp.dest(app.prdPath + 'vendor')) |
| 256 | + .pipe($.connect.reload()); |
| 257 | + }); |
| 258 | +
|
| 259 | + ``` |
0 commit comments