Glup installation and startup

Table of contents

 foreword

 What is gulp:

 1. Install node.js

2. Install gulp

1. Install gulp globally.

2. Install as a project development dependency.

3. Create a gulpfile.js file in the project root directory.

import toolkit

task code

4. Run gulp

5. Create a packpage.json file

6. Change warehouse address

3. The start of the gulp project

expand

---

 foreword

 What is gulp:

Gulp is a front-end automation build tool based on node.js , developers can use it to build automation workflows (front-end integrated development environment).
Using gulp, you can simplify the workload and let you focus on the development of functions, thereby improving your development efficiency and work quality.
For example: you can use gulp to automatically refresh the webpage, which is very similar to the MVVM development model. If you know something about vue.js, then you must be familiar with it. You can also use gulp to preprocess sass, code detection, image optimization and compression, all with one simple command .

 1. Install node.js

Because gulp is based on node.js.

Installation address: https://nodejs.org/en/

It is recommended to install the LTS version.

2. Install gulp

1. Install gulp globally.

Open cmd and enter:

npm install --global gulp

node -v View node.js version

npm -v view npm version

2. Install as a project development dependency.

After the global installation is complete, you need to install it once in each gulp project to be used, switch the directory to the project folder, enter cmd, and then execute on the command line:

npm install --save-dev gulp

3. Create a gulpfile.js file in the project root directory.

import toolkit

var gulp = require('gulp');

task code

gulp.task('default',function(){undefined

// put the default task code here

});

//压缩js的任务
gulp.task('jsmin', function() {
    gulp.src('build/H5/**/*.js') //该任务针对的文件
        .pipe(uglify({
            //mangle: true,//类型：Boolean 默认：true 是否修改变量名
            mangle: {
                except: ['app', 'require', 'exports', 'module', '$']
            } //排除混淆关键字
        })) //该任务调用的模块
        .pipe(gulp.dest('build/H5/')); //压缩存放的路径
});

gulp.task('cssmin', function() {
    gulp.src('build/H5/**/*.css')
        .pipe(cssmin({
            advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7', //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
                //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        .pipe(gulp.dest('build/H5/'));
});

//压缩html任务
gulp.task('htmlmin', 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('build/H5/**/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('build/H5/'));
});

4. Run gulp

Enter at the command line: gulp

5. Create a packpage.json file

Create a packpage.json file in the root directory of the project file, switch the directory to the project folder and enter cmd,

Enter at the command line: npm init -y

6. Change warehouse address

The domestic connection to the npm server is unstable, which can be solved by using the Taobao mirror.

                Enter at the command line:

                       npm config set registry="https://regitry.npm.taobao.org"

                     or

                        npm config set disturl https://npm.taobao.org/dist 

3. The start of the gulp project

 Start command: enter gulp

expand

1.页面热更新
安装
livereload = require('gulp-livereload'), //热更新
connect = require('gulp-connect'), //启动服务

<!-- 	#谷歌安装livereload插件
	#执行gulp命令 -->

2.开发
在 view 目录创建开发模块的文件夹

    如：### login
    		--login.html
    		--login.js   --页面自动加载login.js并执行 init()方法 或配置页面 module-main='login.js'
    		--*.tpl      --模板文件    require('template');
    		--*.json     --配置文件	   require('config.json');

3.打包命令
本地：gulp
测试: gulp build --env t
生产：gulp build --env p

4.---项目文件名xxx

测试环境，双击 build_test.cmd,自动打包，完成后自动关闭，会生成 xxx(你的最外层文件名)文件包
生产环境，双击 build_product.cmd，自动打包，完成后自动关闭，会生成 xxx(你的最外层文件名)文件包
测试和生产的配置，命令会自动更改 app.js
可以全量发，或增量发，发完记得重启

---