gulp 怎么给文件头写入信息

1.文件合并：关于文件合并存疑惑前端发底该所jscss写文件各页面写我建议发候写线候合并处于浏览器说同页面相同文件默认请求缓存其页面请求相同文件芦耐直接缓存读取减少文件网络请求提高网页速度所文件合并必要

2.文件压缩：既都合并何再压缩呢

3.语检查：功能般面第4条功能配合使用文件修改候检查否语错误并命令行输错误信息源哗蔽

4.监听文件变化：监听某目录文件否修改修改执行特定 *** 作比面几 *** 作

4点比较用功能更功能根据自需要添加

var gulp = require('gulp')

var jshint = require('gulp-jshint')//语检查

var concat = require('gulp-concat'雹州)//合并文件

var uglify = require('gulp-uglify')//压缩代码

var rename = require('gulp-rename')//重命名

// 语检查

gulp.task('jshint', function () {

return gulp.src('public/javascripts/*.js')

.pipe(jshint())

.pipe(jshint.reporter('default'))

})

// 合并文件压缩代码

gulp.task('minify', function (){

return gulp.src('public/javascripts/*.js')

.pipe(concat('all.js'))

.pipe(gulp.dest('public/javascripts/dist'))

.pipe(uglify())

.pipe(rename('all.min.js'))

.pipe(gulp.dest('public/javascripts/dist'))

})

// 监视文件变化

gulp.task('watch', function () {

gulp.watch('public/javascripts/*.js', ['jshint', 'minify'])

})

// 注册缺省任务

gulp.task('default', ['jshint', 'minify', 'watch'])

// gulp.task('default', ['jshint', 'minify'])

-

1.下面我们要来试验如何用gulp来读取webpack的配置文件？

先把webpack.config.js的入口为空

/滑银/ entry是入口文件，可以多个，代表要编译那些js

entry:{},

1

2

1

2

2.修改gulpfile.js

var gp = require('gulp')

var gulp_webpack = require('gulp-webpack')

var webpack= require('webpack')

var webpack_config = require('./webpack.config.js')

// 生成js文件

gp.task('build-js',function(){

gulp_webpack(webpack_config,webpack)

.pipe(gp.dest('./build/js'))

})

// 读取config

gp.task('config',function () {

var fs = require('fs')

var root = './src/modules/'

var config = {}

var dirObj = fs.readdirSync(root)

dirObj.forEach(function (d) {

// d 是文件夹名,也代表了 我们的入口节点名

var fileObj = fs.readdirSync(root + d)

var ret = fileObj.map(function (jsfile) {

return root + d + '/' + jsfile

})

config[d] = ret

})

webpack_config.entry = config

})

// 最终生成

gp.task('run',['config'],function(){

webpack(webpack_config,function (error,status) {

// 这里需要gulp处理过程

})

})

gulp的config任务里完成了对./src/modules/下文顷让镇件的读取，然后组织成雀粗配置，给web pack的entry

3.执行gulp任务：gulp run 后，同样完成了webpack打包

随着 node 的出现， javascript 的舞台越来越大，能做的事情越来越来。

本篇，我们来聊一聊前端工程化构建工具 Gulp , 并定制符合特定需求的 Gulp 插件 。

Gulp是一个自动察游激化和增强工作流的工具包利用Gulp和败袜JavaScript的灵活性来自动化缓慢、重复的工作流，并将它们组合成高效的构建管道。

废话说完，接下来，都是干货啦！

完全展开以后是这样的

注意， 如果希望 gulpfile 文件也能写es6 语法， 需要装个库： yarn add @babel/register。所有已配好，此处用的是 gulp.babel.js

下面一个一个来分解：

package.json

先用 yanr install 装一下需要用到的包

1. 关于 gulp 的pipe

pipe 意味管道， 很好理解，文件流通过 pipe 管道， 那么就可以在这个过程中对文件流进行 *** 作，定制自己的需求。 所有的处理都是在 pipe 中进行的。例如上图中的例子,

！！那么同理： 我们也可以加入自己写的 gulp 插件 对文件流进行处理

2.实现

我们先来实现一个很磨吵简单的功能， 比如 在所有的 js 文件里添加注释 this is js， 在所有css 文件里添加注释 this is css， 在所有其他类型的文件里添加 this is other。 具体实现如下：

selfPlugin.js

---