gulpfile.js 中的坑--注入篇(gulp-inject,gulp-wiredep)

今天遇到了一个坑,坑了我很久,本来在帝都呼吸就困难,还要来这么一处,真心让人受不了,难怪说屌丝程序猿说高危职业,容易引发猝死,接下来我说一说让我命悬一线的因素。

首先,我是个初学者,菜鸟,屌丝,欢迎吐槽。

坑一: 文件的注入  gulp-inject 插件介绍:css 和 WebComponent 注入插件,即注入到您的index.html文件中(官方解释)
个人理解: 就是把 css,js全部利用这个插件添加到 index.html 页面里,不需要手动去添加


在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 数据流





gulp 测试









为了便于查看,为还用了另一个插件

坑二: 搭建本地服务 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'));
});

运行完生成出来的就是这样的





gulp 测试








为了方便查看,全部整合在了一起:请君欣赏!




	
	gulp 测试
	
    
    
    
    
    
    

    
    
    



// *****************************
// 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');
});









你可能感兴趣的:(gulp)