目录
1. 通过一个小练习来了解browserify
白日依山尽，黄河入海流。 欲穷千里目，更上一层楼。
本文为本人略读官网文档后的大略笔记，实在不适合他人阅读
前言
一个JavaScript程序的静态模块打包器（将css、img、js等文件打包成一个单独的js文件）
nodejs 把JavaScript的使用从浏览器端扩展到了服务器端，使其快速流行。
nodejs中常用到的require, module.exports等功能在浏览器端并不能直接使用，browserify解决了这个问题
安装
npm install -g browserify
1. 通过一个小练习来了解browserify
第一步：创建hello.js文件
module.exports = 'Hello World！';
第二步：创建main.js
var msg = require('./hello.js');
console.log("logInfo:", msg);
第三步：browserify打包
browserify main.js -o bundle.js
第四步：创建index.html（使用bundle.js）
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script> <!--引入打包后的js文件-->
</body>
</html>
运行效果
使用jquery
安装
npm i --save jquery
修改hello.js
module.exports = function(){
var $ = require('jquery');
$(function(){
$("body").html("<h1>Hello World!</h1> jquery version: " + $.fn.jquery);
})
};
修改main.js
var hello = require('./hello.js')
hello();
重新打包
browserify main.js -o bundle.js
运行效果
2. Glup
第一步： 创建npm说明文件 package.json
npm init
填写 项目的名称、描述、作者等信息 ( 输入完成一项后回车输入下一项 )
注意：
1. 项目名必须全小写
生成的package.json文件
{
"name": "ee",
"version": "1.0.0",
"description": "hello",
"main": "main.js",
"scripts": {
"test": "testTT"
},
"author": "cx",
"license": "ISC"
}
注意：
1. JSON文件不支持注释
第二步： 安装gulp
npm install --g gulp
npm i --save-dev gulp gulp-rename gulp-browserify
- gulpfile.js 配置文件
var gulp = require('gulp');
var rename = require('gulp-rename'); // 重命名
var uglify=require('gulp-uglify'); // js压缩
var watch=require('gulp-watch'); // 监视
var less=require('gulp-less'); // 编译less
var minifyCss = require("gulp-minify-css"); // 压缩CSS
var minifyHtml = require("gulp-minify-html"); // 压缩html
var jshint = require("gulp-jshint"); // js检查
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); // png图片压缩插件
var connect=require('gulp-connect'); // 引入gulp-connect模块
var browserify = require('gulp-browserify'); // browserify
var stringify = require('stringify'); // require('./hello.html')
# 默认执行default任务
gulp
# 执行build任务
gulp build
#gulp.series：串行
#gulp.paralle：并行
错误：ReferenceError: primordials is not defined
原因：node版本与gulp版本不兼容
解决：回退node版本
错误：AssertionError [ERR_ASSERTION]: Task function must be specified
原因：gulp 4.0 的语法变了
解决：
安装gulp-sass
npm install gulp-sass --save-dev
安装js压缩插件
npm install gulp-uglify --save-dev
安装文件合并插件
npm install gulp-concat --save-dev
安装html压缩插件
npm install gulp-htmlmin --save-dev
安装搭建本地服务器插件
npm install gulp-connect --save-dev
css.js（处理scss文件）
const { src, dest } = require('gulp');
const sass = require('gulp-sass');
function css() {
return src('./src/static/scss/*.scss', { sourcemaps: true })
.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(dest('./test/css', { sourcemaps: true }))
}
exports.css = css;
script.js
const { src, dest } = require('gulp');
const concat = require('gulp-concat');
var uglify = require('gulp-uglify');
function script() {
return src('./src/static/script/utils/*.js', { sourcemaps: true })
.pipe(concat('lib.min.js')) // 将utils文件夹下的js文件合并到成一个文件lib.min.js
.pipe(src('./src/static/script/*.js', { sourcemaps: true }))
.pipe(uglify()) // 压缩js文件
.pipe(dest('./src/js', { sourcemaps: true }))
}
exports.script = script;
copy.js (用于生成dist)
const { src, dest, parallel } = require('gulp');
var htmlmin = require('gulp-htmlmin');
function copyCSS() {
return src('./src/css/*.css')
.pipe(dest('./dist/css'))
}
function copyJs() {
return src('./src/js/*.js')
.pipe(dest('./dist/js'))
}
function copyHtml() {
return src('./src/*.html')
.pipe(htmlmin({
removeComments: true,//清除HTML注释
minifyJS: true,//压缩页面JS
minifyCSS: true //压缩页面CSS
}))
.pipe(dest('./dist/'))
}
exports.copy = parallel(copyCSS, copyJs, copyHtml);
index.js(gulp执行的入口文件)
const { series, parallel, watch } = require('gulp');
const { css } = require('./css.js');
const { script } = require('./script.js');
const { copy } = require('./copy.js');
var connect = require('gulp-connect');
function autoWatch() {
watch('./src/static/scss/*.scss', css);
watch('./src/static/script/*.js', script);
watch(watchPath, series(watchCallback))
}
var watchPath = ['./src/*.html','./src/css/*.css','./src/js/*.js'];
function watchCallback(){
return src(watchPath)
.pipe(connect.reload());
}
function server(cb) { // 本地服务器
connect.server({
port: 6001,
root: 'src',
livereload: true
});
cb();
}
exports.autoWatch = series( server, autoWatch);
exports.build = copy;
// 执行gulp build 就可以生成一个dist文件夹，里面有css,js,html文件
// gulp autoWatch 启动本地服务器，然后启动监听任务
创建hello.html
<!-- hello.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<h1>Hello World!</h1>
<span style="color:blue">你好</span>
</body>
</html>
修改hello.js
module.exports = function(){
var $ = require('jquery');
$(function(){
$("body").html(require('./hello.html'));
})
};
代码检查工具 jshint
创建 .jshintrc文件
{
"noempty": true,
"nonbsp": true,
"nonew": true,
"undef": true,
"unused": true,
"trailing": true,
"maxlen": 120,
"asi": true,
"esnext": true,
"laxcomma": true,
"laxbreak": true,
"node": true,
"globals": {
"describe": false,
"it": false,
"before": false,
"beforeEach": false,
"after": false,
"afterEach": false,
"Promise": true
}
}
安装依赖
npm i --save-dev gulp-jshint jshint jshint-stylish
gulpfile.js 配置文件修改
var gulp = require('gulp');
var rename = require('gulp-rename');
var browserify = require('gulp-browserify');
var jshint = require('gulp-jshint');
gulp.task('build', ['lint'], function(){
return gulp.src('./main.js')
.pipe(browserify({
}))
.pipe(rename('bundle.js'))
.pipe(gulp.dest('./'));
});
gulp.task('lint', ['jshint']);
gulp.task('jshint', function(){
return gulp.src(['./*.js', '!./bundle.js'])
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'));
})
gulp.task('default', ['build'], function(){
return gulp.watch(['./*.js', '!./bundle.js'], ['build']);
})
