首页 > 代码库 > 前端开发自动化之gulp

前端开发自动化之gulp

2024-09-11 16:12:33   218人阅读

前端开发自动化之gulp

　　在这里我们将用gulp来实现前端开发自动化,考虑到我们永远屹立的万里长城我们使用cnpm,同时本文内容以本人另一篇文章(http://www.cnblogs.com/izgl/p/6433105.html)为前提,请自行参考

　　在工程目录下打开cmd

 　　　1.cnpm install gulp -g --save-dev 
    2.cnpm install gulp --save-dev
    2.gulp -v  检测gulp有没有安装好
    3.到package.json中观察 "devDependencies": {"gulp": "^3.9.1"}  这个代码有,代表配置成功
    4. 到code下 建立一个gulpfile.js 文件
    5. 再建立两个文件  分别命名为src 和 distribution
    6  到src文件夹下 建立 index.html
    7. 将src文件夹下的  index.html 复制到  distribution

　　环境的搭建需要安装以下功能插件以及安装命令行代码

　　1.压缩css

　　cnpm i gulp-cssnano --save-v

　　2.压缩js

　　cnpm i gulp-cancat --save-v

　　3.压缩html

　　cnpm i gulp-htmlmin --save-v

　　4.混淆js

　　cnpm i gulp-uglify --save-v

　　5.浏览器同步测试

　　//先安装

   cnpm install -g browser-sync

   cnpm i gulp-uglify --save-v

   //到src文件夹下 建立 index.html

　　6.实现浏览器自动同步需要如下js代码(位于gulpfile.js)

//将index.htmlcopy到distribution
    var gulp = require(‘gulp‘);
    gulp.task(‘copy‘, function() {
    // 将你的默认的任务代码放在这
        gulp.src(‘src/index.html‘)
            .pipe(gulp.dest(‘distribution‘))
            .pipe(browserSync.reload({
                stream:true
            }));
        gulp.src(‘src/css/*.css‘)
            .pipe(gulp.dest(‘distribution/css‘))//把src/css里面css文件copy到distribution/css
        });

    var gulp = require(‘gulp‘);
    gulp.task(‘copyCss‘, function() {
    // 将你的默认的任务代码放在这
        gulp.src(‘src/css/*.css‘)
            .pipe(gulp.dest(‘distribution/css‘))//把src/css里面css文件copy到distribution/css
            .pipe(browserSync.reload({
            stream:true
        }));
    });


    //less转换成css 并且压缩
    var less = require(‘gulp-less‘);
    var cssnano = require(‘gulp-cssnano‘);
    gulp.task(‘less‘,function () {
        return gulp.src(‘src/style/*.less‘)
            .pipe(less()) //less转换成css
            .pipe(cssnano()) //压缩css
            .pipe(gulp.dest(‘distribution/css‘)) //把css文件copy到distribution/css
            .pipe(gulp.dest(‘src/css‘))//把css文件copy到src/css
            .pipe(browserSync.reload({
                stream:true
            }));
    });


    //压缩js并且混淆js
    var concat = require(‘gulp-concat‘);
    var uglify = require(‘gulp-uglify‘);
    gulp.task(‘concat‘, function() {
        return gulp.src(‘src/js/*.js‘)
            .pipe(concat(‘all.js‘)) //压缩到目标文件
            .pipe(uglify())//混淆js
            .pipe(gulp.dest(‘distribution/js‘)) //把文件copy到distribution/js
            .pipe(browserSync.reload({
                stream:true
            }))
    });


    //压缩HTML
    var htmlmin = require(‘gulp-htmlmin‘);
    gulp.task(‘minify‘, function() {
        return gulp.src(‘src/*.html‘)
            .pipe(htmlmin({collapseWhitespace: true}))
            .pipe(htmlmin({preserveLineBreaks: true}))
            .pipe(htmlmin({processConditionalComments: true}))
            .pipe(htmlmin({removeAttributeQuotes: true}))
            .pipe(htmlmin({removeComments: true}))
            .pipe(htmlmin({removeEmptyElements: true}))
            .pipe(htmlmin({removeScriptTypeAttributes: true}))
            .pipe(htmlmin({removeStyleLinkTypeAttributes: true}))
            .pipe(htmlmin({removeAttributeQuotes: true}))
            .pipe(gulp.dest(‘distribution‘))
            .pipe(browserSync.reload({
            stream:true
        }))
    });
    
    
    //自动监听文件内容变化，实现开发流自动化
    // gulp.task(‘auto‘,function () {
    //     gulp.watch(‘src/css/*.css‘,[‘less‘]);
    //     gulp.watch(‘src/js/*.js‘,[‘concat‘]);
    //     gulp.watch(‘src/style/*.less‘,[‘less‘]);
    //     gulp.watch(‘src/index.html‘,[‘minify‘]);
    // });
    
    
    
    // 代替上面“自动监听文件内容变化，实现开发流自动化”
    var browserSync = require(‘browser-sync‘).create();
    // Static server
    gulp.task(‘serve‘, function() {
        browserSync.init({
            server: {
                baseDir: "./distribution"
            }
        });
        gulp.watch(‘src/css/*.css‘,[‘less‘]);
        gulp.watch(‘src/js/*.js‘,[‘concat‘]);
        gulp.watch(‘src/style/*.less‘,[‘less‘]);
        gulp.watch(‘src/css/*.css‘,[‘copyCss‘]);
        gulp.watch(‘src/index.html‘,[‘minify‘]);
    });

 7.cmd运行gulp.serve

 

前端开发自动化之gulp


联系
我们