德育论文ppt,外星人农场,张家口夫妻交友
一、安装步骤
1.首先确定是否安装了node.js，如果未安装，请先安装node.js；
2.确定是否安装了包管理工具npm，如未安装请安装：npm install npm -g；
3.安装gulp： npm install gulp --save-dev；（至于为什么是--save-dev，因为我们只是在开发环境中会用到，生产发布是用不到它的）
4.安装用于html、css、js代码压缩常用的插件，分别为：gulp-htmlmin、gulp-cssnano、gulp-uglify；
npm install --save-dev gulp-htmlmin;
npm install --save-dev gulp-cssnano;
npm install --save-dev gulp-uglify;
5.在根目录新建文件 gulpfile.js ，这个文件是使用gulp压缩的配置文件,相关配置如下；
我要评论 1 'use strict';
2
3 var gulp = require('gulp');
4
5 //压缩html
6 var htmlmin = require('gulp-htmlmin');
7 gulp.task('html', function(){
8 gulp.src(['./src/app/*.html'])
9 .pipe(htmlmin({
10 collapseWhitespace: true,//压缩HTML
11 removeComments: true,//清除HTML注释
12 removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
13 removeStyleLinkTypeAttributes: true,//删除<link>的type="text/css"
14 minifyJS: true,//压缩页面JS
15 minifyCSS: true//压缩页面CSS
16 }))
17 .pipe(gulp.dest('dist/src/app'));
18 });
19
20 //压缩css
21 var cssnano = require('gulp-cssnano');
22 gulp.task('style', function(){
23 gulp.src(['./css/*.css'])
24 .pipe(cssnano())
25 .pipe(gulp.dest('dist/css'));
26 });
27
28 //压缩js
29 var uglify = require('gulp-uglify');
30 gulp.task('script', function(){
31 gulp.src(['./src/static/*.js'])
32 .pipe(uglify({
33 mangle: false// 跳过函数名，使其不被压缩，函数名也压缩可改为true
34 }))
35 .pipe(gulp.dest('dist/src/static'));
36 });
37
38 //同步代码变化
39 gulp.task('dist', function(){
40 gulp.watch(['./src/app/*.html'], ['html']);
41 gulp.watch(['./css/*.css'], ['style']);
42 gulp.watch(['./src/static/*.js'], ['script']);
43 });
44
45 gulp.task("default", ["html","style","script","dist"]);
6.初始化得到文件package.json：npm init ；（简单点一路回车即可）
7.一切妥当，命令行执行gulp，等待完成即可。
注：（1）.这里的配置进行了适当简写，如果项目不是新建立的，而是在项目原有基础上增加页面，为了提升压缩效率可以不匹配所有的html、css、js文件，只配置你新增的文件即可，如下例子：
1 //压缩html
2 var htmlmin = require('gulp-htmlmin');
3 gulp.task('html', function(){
4 gulp.src(['./src/app/level2HK.html','./src/app/'])
5 .pipe(htmlmin({
6 collapseWhitespace: true,//压缩HTML
7 removeComments: true,//清除HTML注释
8 removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
9 removeStyleLinkTypeAttributes: true,//删除<link>的type="text/css"
10 minifyJS: true,//压缩页面JS
11 minifyCSS: true//压缩页面CSS
12 }))
13 .pipe(gulp.dest('dist/src/app'));
14 });
gulp.src(['路径a','路径b'])中是支持数组形式入参的，当然也可以直接字符串入参 gulp.src('路径a')
（2）本处只列举了代码的初步压缩模块，适合刚刚接触gulp的初学者，其实gulp还有其他很多优秀的插件，如代码的合并、混淆等等插件，用户可以根据自己的项目实际需要进行安装并进行相应配置；
如：代码合并插件 gulp-concat；
文件名称修改插件 gulp-rename；
图片压缩插件 gulp-imagemin；
sass文件编译插件 gulp-sass；
检查改变状态 gulp-changed；
如下对js的压缩、合并、修改名称：
1 gulp.task('scripts', function() {
2 return gulp.src('./src/static/*.js')
3 .pipe(concat('main.js')) //合并所有js到main.js
4 .pipe(gulp.dest('./src/static')) //输出main.js到文件夹
5 .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
6 .pipe(uglify()) //压缩
7 .pipe(gulp.dest('./src/static')); //输出
8 });
如下对图片的压缩配置：
1 // 压缩图片
2 gulp.task('images', function () {
3 gulp.src('./src/images/*.*')
4 .pipe(changed('dist/images', {hasChanged: changed.compareSha1Digest}))
5 .pipe(imageMin({
6 progressive: true,// 无损压缩JPG图片
7 svgoPlugins: [{removeViewBox: false}]// 不移除svg的viewbox属性
8 }))
9 .pipe(gulp.dest('dist/images'))
10 .pipe(browserSync.reload({stream:true}));
11 });
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论