gulp上线打包代码
在Mac平板电脑上演示过程如下:
一、安装node
网上有教程(https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html)，按照教程一步步安装就可以了，夜色在这里就不多说了，安装过后需要检测是否安装成功，
在终端输入如下命令， 显示版本号即安装成功。
node -v
npm -v
二、全局安装gulp
npm install gulp -g (如果安装失败： sudo npm install gulp -g + 回车）
检测gulp是否安装成功，执行 gulp -v 显示版本号即安装成功
三、配置gulp文件
①cd 项目文件路径
例如：cd test
②创建package.json文件
package.json是基于node.js项目必不可少的配置文件，进入你的本地项目（我的是test）后既可以手动创建，也可以代码创建；
代码创建：npm init
其中 name, version, description必填，其他无所谓，填完后保存，在test项目下就会生成package.json文件；
test文件夹生成package.json文件，打开package.json文件如下所示：
③项目内安装gulp
用npm install gulp --save-dev或 npm install --save-dev gulp命令
（卸载的话将前面的命令中install换成uninstall即可）；安装完后，在test里生成 package-lock.json文件 和 node_modules文件夹，此外在package.json里能看到具体版本信息；
test文件夹里的3个文件
④创建gulpfile.js文件（！！！重要，重要，重要）
gulpfile.js是gulp最重要的配置文件，放于根目录中。
到这里gulp的配置文件就弄好了，需要注意的是：创建的文件名字一定要和我一致;
四、gulp语法
在test里新建src和build文件夹， src里放置未压缩的 css，js，html 文件，build放置压缩后的 css，js，html文件;
①引入模块
②在终端安装模块
npm install -–save-dev NAME (或者 npm install NAME --save-dev)
例如：安装gulp模块 npm install --save-dev gulp
模块安装后都可以在node_modules文件里找到, 如果找不到重新下载模块, 直到找到为止;
③创建task任务
//定义任务 task
gulp.task("hello",function(){
console.log("hello gulp !");
});
在终端输入指令: gulp hello
效果如下所示:
或者在gulpfile.js里添加默认事件:
//设置默认任务
gulp.task("default",["hello"]);
在终端执行: gulp
效果与上面一样;
***********************************************
//压缩单个css文件
gulp.task("oneCss",function(){
gulp.src("./src/css/b.css") //css文件路径
.pipe(cleanCss()) //压缩css文件
.pipe(gulp.dest("./build")); //css压缩文件存放路径 如果文件夹不存在,自动创建文件夹
});
//压缩多个css文件
gulp.task("muchCss",function(){
gulp.src("./src/css/*")
.pipe(cleanCss())
.pipe(gulp.dest("./build/css"));
});
//将多个css文件, 压缩合并为1个css文件
gulp.task("muchCss-toOne",function(){
gulp.src("./src/css/*")
.pipe(concat("common.css"))
.pipe(cleanCss())
.pipe(gulp.dest("./build/css"));
});
*********************************************
//压缩单个js文件 (注释内容自动去除)
gulp.task("oneJs",function(){
gulp.src("./src/js/msg.js")
.pipe(uglify())
.pipe(gulp.dest("./build/js"));
});
//压缩多个js文件
gulp.task("muchJs",function(){
gulp.src("./src/js/*")
.pipe(uglify())
.pipe(gulp.dest("./build/js"));
});
//多个js文件压缩为一个
gulp.task("muchJs-toOne",function(){
gulp.src("./src/js/*")
.pipe(concat("common.js"))
.pipe(uglify())
.pipe(gulp.dest("./build/js"));
});
***************************************
//压缩单个html文件
gulp.task('oneHtml', function() {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
};
gulp.src('./src/js/msg.html').pipe(htmlmin(options)).pipe(gulp.dest('main.html'));
});
*************************************************************************
//删除文件
gulp.task("remove",function(){
return del([
'./build/cs/Msg.js',
'./build/a.css',
'./build/cs',
'./build/html'
]);
});
***************************************************************
// 图片压缩
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true //类型：Boolean 默认：false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('./build/img'));
});
gulp-imagemin模块可以压缩的图片格式: PNG、JPEG、GIF和SVG ;
如果报错:
重新安装gulp-imagemin模块;
检查路径;
是否存在非上述格式的图片;
如果还不行, 那就是人品问题了...