今天遇到了一个坑，坑了我很久，本来在帝都呼吸就困难，还要来这么一处，真心让人受不了，难怪说屌丝程序猿说高危职业，容易引发猝死，接下来我说一说让我命悬一线的因素。
首先，我是个初学者，菜鸟，屌丝，欢迎吐槽。
坑一： 文件的注入 gulp-inject 插件介绍：css 和 WebComponent 注入插件，即注入到您的index.html文件中（官方解释）
个人理解： 就是把 css，js全部利用这个插件添加到 index.html 页面里，不需要手动去添加
<script src="../bower_components/jquery/dist/jquery.js"></script>
<link src="css/index.css"/>
在gulp的世界里，这样的事情就不需要用手写了，有人说可以复制粘贴，很快，要知道，复制100多个，然后依次给名字，而且后期还要维护，得随时修改，好好想想吧，少年。。。我的结构目录时这样的
gulpDemo
| bower_components
| dist
| style
| script
| images
-- index.html
| node_modules
| src
| app
| assets
| common
| less
-- index.html
-- bower.json
-- gulpfile.js
-- package.json
在项目里我是这样写的
var inject = require('gulp-inject');
// inject 注入
gulp.task('index', function() {
gulp.src('./dist/index.html') // 获取该文件的数据
.pipe(inject(gulp.src(['./dist/scripts/app.js'], { // 让获取的流被 inject 操作一次：把指定文件注入到流文件中（也就是把 app.js 那段外部链接的代码写到 index.html中）
read: false // 暂时不用管什么意
}), relative: true // 暂时不用管什么意
})
.pipe(gulp.dest('./dist')); // 把被操作过的这个文件流放到 dist 文件夹下
})可以直接 gulp task 操作，就能有效果，打开 --> dist -->index.html 就会看到里面多了一个，当然，前提是，不要忘记了在 html 的页面里添加
<!-- inject:js -->
<!-- endinject --></span>才会出现下面的结果，不然，页面不知道在哪放置 inject 数据流
<!DOCTYPE html>
<html lang="en" ng-app="faithfairy">
<head>
<meta charset="UTF-8">
<title>gulp 测试</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
</head>
<body>
<!-- inject:js -->
<script src="scripts/app.js"></script>
<!-- endinject -->
</body>
</html>
为了便于查看，为还用了另一个插件
坑二： 搭建本地服务 browser-sync
之前只知道用原生的node来搭建，比较痛苦，后来才发现 browser-sync 这个插件很不错，它的功能不仅限于此，但我只需要它给我搭建一个服务就行了。
官网有详细的介绍：http://www.browsersync.cn
我用到的功能： 让这个插件，在我本地创建一个服务器，该目录目录为全局，也就是 localhost:gulpDemo caojf$ 的全局，访问的时候在浏览器地址栏输入：localhost:3000/dist
var browserSync = require('browser-sync').create(); // 静态服务器
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./" //这里是坑的重点，当时我设置的是 ./dist 后来发现，注入的插件报 404 错误，大家切记啊，一定不要跟我一样二
}
});
});然后再讲讲 bower_components 文件夹内的组件注入，千万别理解成可以用 inject 操作，我就是犯过这样的错，才浪费了时间，还不智能。
网上大多都在讲 bower 有多么多么好，但基本没有提及用什么插件去注入到 index.html 文件中。
坑三： bower 注入的特定插件 wiredep
官方解释： Wire Bower dependencies to your source code.
我的理解 ： 把 bower.json 里所有签到过的插件全部都注入到指定的文件里（index.html）
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./src/index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('./dist'));
});运行完生成出来的就是这样的
<!DOCTYPE html>
<html lang="en" ng-app="faithfairy">
<head>
<meta charset="UTF-8">
<title>gulp 测试</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js">
<!-- endbower -->
</head>
<body>
<!-- inject:js -->
<script src="scripts/app.js"></script>
<!-- endinject -->
</body>
</html>为了方便查看，全部整合在了一起：请君欣赏！
<!DOCTYPE html>
<html lang="en" ng-app="faithfairy">
<head>
<meta charset="UTF-8">
<title>gulp 测试</title>
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
</head>
<body> <!-- inject:js -->
<script src="scripts/app.js"></script>
<!-- endinject -->
</body>
</html>
// *****************************
// gulpfile.js
// *****************************
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
connect = require('gulp-connect');
browserSync = require('browser-sync').create();
inject = require('gulp-inject');
wiredep = require('wiredep').stream;
// 样式
gulp.task('styles', function() {
return gulp.src('src/**/app.scss')
.pipe(sass('src/**/app.scss', {
style: 'expanded'
}))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({
message: 'Styles task complete'
}));
});
// 脚本
gulp.task('scripts', function() {
return gulp.src('./src/**/app.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('app.js'))
.pipe(gulp.dest('./dist/scripts'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('./dist/scripts'))
.pipe(notify({
message: 'Scripts task complete'
}));
});
// 图片
gulp.task('images', function() {
return gulp.src('src/assets/**/*')
.pipe(cache(imagemin({
optimizationLevel: 3,
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/images'))
.pipe(notify({
message: 'Images task complete'
}));
});
// 静态服务器
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 清理
gulp.task('clean', function() {
return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {
read: false
})
.pipe(clean());
});
// 注入
gulp.task('index', function() {
gulp.src('./dist/index.html')
.pipe(inject(gulp.src(['./dist/scripts/app.js'], {
read: false
}), {
relative: true
}))
.pipe(gulp.dest('./dist'));
});
// bower 元素的注入 './bower_components/angular/*.js',
gulp.task('bower', function () {
gulp.src('./src/index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('./dist'));
});
// 运行前的准备工作
gulp.task('startFun', ['bower', 'styles', 'scripts', 'images'], function() {
gulp.start('index');
});
// 添加 注入
gulp.task('startInject', ['startFun'], function() {
gulp.start('browser-sync');
});
// 运行项目并开启服务
gulp.task('default', ['clean'], function() {
gulp.start('startInject');
});
3917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
