前端开发gulp简单的部署项目步骤

安卓前端开发入门书籍 安卓开发有前端后端之分么 安卓开发前端后端源码

刚开始我先接触了grunt,但是再学习gulp之后,个人觉得gulp的使用方式比较统一,不像grunt那么混乱,更易于维护,自己比较容易接受,所以选用了gulp插件。
部署项目一般包括以下步骤:
1、删除上次部署的所有文件;
2、复制文件、网页依赖库、小图标等;
3、压缩、合并脚本文件;
4、压缩样式文件;
5、压缩图片;
6、html文件压缩、依赖加载替换;

首先要安装nodejs,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以全局安装cnpm(官方网址:http://npm.taobao.org;):
html 代码

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

全局安装gulp
html 代码

cnpm install -g gulp

新建package.json文件
html 代码

npm init

package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
json 代码

{
    “name”: “gulp-demo”, //项目名称(必须)
    “version”: “1.0.0”, //项目版本(必须)
    “description”: “This is for study gulp project !”, //项目描述(必须)
    “homepage”: “”, //项目主页
    “repository”: {
        //项目资源
        “type”: “git”,
        “url”: “https://xxxx”
    },
    “author”: {
        //项目作者信息
        “name”: “shana”,
        “email”: “shana_fang@qq.com”
    },
    “license”: “ISC”, //项目许可协议
    “devDependencies”: {
        //项目依赖的插件
        “gulp”: “^3.8.11”,
        “gulp-sass”: “^3.0.0”
    }
}

进入项目目录安装gulp插件
html 代码

npm install gulp

例如安装sass编译文件:
html 代码

cnpm install gulp-sass –save-dev

新建gulpfile.js文件(重要)
javascript 代码

/*gulp配置文件*/
var VERSION = ‘v_1_0’
var DATE = new Date().getTime()
var gulp = require(‘gulp’),
    //清除文件
    del = require(‘del’),
    //复制文件
    copy = require(‘copy’),
    //js压缩插件
    uglify = require(‘gulp-uglify’),
    //合并文件
    concat = require(‘gulp-concat’),
    //压缩css
    minifyCSS = require(‘gulp-minify-css’),
    miniSass = require(‘gulp-sass’)
//压缩图片
;(imagemin = require(‘gulp-imagemin’)),
    //压缩html
    (htmlmin = require(‘gulp-htmlmin’)),
    //html文件对合并后的替换处理插件
    (htmlReplace = require(‘gulp-html-replace’))
//1.清除旧部署的文件
gulp.task(‘clean’, function(cb) {
    del([‘dest/*’])
    cb()
})
//2.拷贝文件
gulp.task(‘copy’, function() {
    //copy(‘font/*’,’dest/font/’,cb);
    gulp
        .src([
            ‘js/bootstrap.min.js’,
            ‘js/ie10-viewport-bug-workaround.js’,
            ‘js/jquery-1.11.3.min.js’,
            ‘js/jquery.easing.min.js’,
            ‘js/jQueryRotate.2.2.js’,
        ])
        .pipe(gulp.dest(‘dest/js/’))
    gulp.src([‘font/*’]).pipe(gulp.dest(‘dest/font/’))
})
//3.压缩合并脚本文件
gulp.task(‘uglify’, function() {
    gulp
        .src([‘js/index.js’])
        .pipe(uglify())
        .pipe(concat(‘index.’ + VERSION + ‘t’ + DATE + ‘.js’))
        .pipe(gulp.dest(‘dest/js/’))
})
//4.压缩合并css文件
gulp.task(‘cssmin’, function() {
    gulp
        .src([‘css/*.css’])
        .pipe(minifyCSS())
        .pipe(concat(‘index.’ + VERSION + ‘t’ + DATE + ‘.css’))
        .pipe(gulp.dest(‘dest/css/’))
})
gulp.task(‘sass’, function() {
    return gulp
        .src(‘sass/*.scss’)
        .pipe(miniSass().on(‘error’, miniSass.logError))
        .pipe(gulp.dest(‘dest/css/’))
})
gulp.task(‘sass:watch’, function() {
    gulp.watch(‘sass/*.scss’, [‘sass’])
})
//5.压缩图片
gulp.task(‘imagemin’, function() {
    gulp
        .src(‘img/**/*.{png,jpg,jpeg,gif,webp.svg}’)
        .pipe(
            imagemin({
                progressive: true,
            }),
        )
        .pipe(gulp.dest(‘dest/img/’))
})
//6.替换html中调用的js和css,并压缩html
gulp.task(‘htmlmin’, function() {
    var option = {
        //压缩html
        collapseWhitespace: true,
        //省略布尔值
        collapseBooleanAttributes: false,
        //删除所有空格属性值
        removeEmptyAttributes: false,
        //删除script的type属性
        removeScriptTypeAttributes: true,
        //删除css的type属性值
        removeStyleLinkTypeAttributes: true,
        //压缩页面js
        minifyJS: true,
        //压缩页面css
        minifyCSS: true,
    }
    gulp
        .src(‘index.html’)
        .pipe(
            htmlReplace({
                indexjs: ‘js/index.’ + VERSION + ‘t’ + DATE + ‘.js’,
                indexcss: ‘css/index.’ + VERSION + ‘t’ + DATE + ‘.css’,
            }),
        )
        .pipe(htmlmin(option))
        .pipe(gulp.dest(‘dest/’))
})
//默认任务组合
gulp.task(‘default’, [‘clean’], function() {
    gulp.start(‘copy’, ‘uglify’, ‘cssmin’, ‘imagemin’, ‘htmlmin’)
})

html 代码

<!– build:indexcss –>
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<!– endbuild –>
<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
<!– 旋转插件 –>
<script type=”text/javascript” src=”js/jQueryRotate.2.2.js”></script>
<script type=”text/javascript” src=”js/jquery.easing.min.js”></script>
<!– build:indexjs –>
<script src=”js/index.js”></script>
<!– endbuild –>

通过执行以下命令:
html 代码

gulp default // 执行默认任务 或 用“ gulp ”

注:将需要用到的依赖库都要进行安装,如js压缩:gulp-uglify,要用“cnpm install gulp-uglify”进行安装才能使用。

捕获一篇好文:
https://zhuanlan.zhihu.com/p/20309820grunt vs gulp

前端安卓开发工资待遇 安卓前端开发职业 安卓前端开发岗位职责

» 本文来自:前端开发者 » 《前端开发gulp简单的部署项目步骤》
» 本文链接地址:https://www.rokub.com/5710.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!