web工作流

Posted 2020-08-16 小数点就是问题

web工作流之Gulp学习

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目；

首先我们要搭配环境；

1、安装node.js，傻瓜式安装。

2、npm的全称是Node Package Manager ，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。

但这个npm服务器在国外，所以下载包的速度很慢，因此使用镜像cnpm

安装镜像cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、打开相应的文件夹创建一个package.json文件，它包括名称、版本、作者这些信息等

命令式创建：

cnpm init

4、全局安装 gulp

cnpm install -g gulp

5、作为项目的开发依赖（devDependencies）安装

cnpm install --save-dev gulp

将gulp安装到局部环境中，生成node_modules

6、在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require(‘gulp‘);

gulp.task(‘default‘, function() {
  // 将你的默认的任务代码放在这
});

require（“模块”）是需要安装模块的

require（“模块”）有多少个安装多少个，不是命令会报错

7、安装插件:

如：
cnpm install --save-dev gulp-concat

cnpm install --save-dev 模块 模块 。。 。。

可单个，可多个一起安装

配置环境，因局部，不能再别的盘使用。

可以根据package.json,安装插件

命令：
gulp install

在当前文件夹打开cmd：shift+鼠标右击

点击（在此处打开命令窗口）

错误例子：

这个说明在此环境下没有安装gulp,重新安装即可

cnpm install --save-dev gulp

这个说明你打错了gulp.task（参数）第一个参数在命令里；

重新正确打过一次就行。

还有一种错误是没有安装插件；安装一遍即可。

只要会看错误行，就可以解决一些常见问题。

gulpfile.js的编写例子：

//加载模块

var gulp=require("gulp");
var concat=require("gulp-concat");
var rename=require("gulp-rename");
var uglify=require("gulp-uglify");
var cssmin=require("gulp-minify-css");
var htmlmin=require("gulp-htmlmin");
var brw=require("browser-sync");
/*压缩css*/
gulp.task("mincss",function(){
    gulp.src("css/*.css")
    .pipe(cssmin())
    .pipe(gulp.dest(‘src/css‘));
});
/*合并压缩重命名js*/
gulp.task("concat",function(){
    gulp.src("js/*.js")
    .pipe(concat("all.js"))
    .pipe(gulp.dest("src"))
    .pipe(uglify())
    .pipe(rename({extname:‘.min.js‘}))
    .pipe(gulp.dest("src"));
});

/*压缩html*/
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.task("htmlmin",function(){
    gulp.src("*.html")
    .pipe(htmlmin(options))
    .pipe(gulp.dest("html"));
});

/*浏览器同步*/
gulp.task("serve",function(){
    brw.init({
        files:["./*.html"],
        server:{baseDir:"./"}
    })
});

这个是编写方式，一般都是这样编写。很简单。这个使用，只要常常使用就很快熟练起来。

报错一般是细节上的问题。