gulp构建项目（一）：环境准备

版权声明：原创文章，引用请注明出处！ https://blog.csdn.net/guang_s/article/details/84664769

一、创建package.json文件

npm init    // 一路回车就行（默认已安装node）

package.json内容如下:

 {
     "name": "gulp-project",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "",
     "license": "ISC"
 }

二、安装项目依赖

1、全局安装gulp

    npm i -g gulp

2、安装项目所需模块

	npm i -D gulp gulp-concat gulp-uglify gulp-csso gulp-imagemin gulp-clean
	
    /**
     * gulp         gulp模块
     * gulp-concat  合并文件
     * gulp-uglify  压缩js
     * gulp-csso    压缩css
     * gulp-imagemin    压缩图片
     * gulp-clean   清空文件夹
    */
    

三、新建gulpfile.js文件，引入模块

    var gulp = require('gulp');
    var concat = require('gulp-concat');        // 合并文件
    var uglify = require('gulp-uglify');        // js 压缩
    var csso = require('gulp-csso');            // css压缩
    var imagemin = require('gulp-imagemin');    // 图片压缩
    var clean = require('gulp-clean');          // 清空文件夹

四、创建gulp任务

    // 打包html
    gulp.task('html', function(){
        return gulp.src('./src/*.html')
            .pipe(gulp.dest('./dist'));
    });

    // 打包js
    gulp.task('js_libs', function(){
        return gulp.src('./src/libs/js/*.js')
            .pipe(gulp.dest('./dist/js'));
    });
    gulp.task('js_main', function(){
        return gulp.src('./src/js/*.js')
            .pipe(concat('main.min.js'))    // 合并文件并命名
            .pipe(uglify())  // 压缩js
            .pipe(gulp.dest('./dist/js'));
    });

    // 打包css
    gulp.task('css_main', function(){
        return gulp.src('./src/css/**/*.css')
            .pipe(concat('main.min.css'))
            .pipe(csso())                   // 压缩优化css
            .pipe(gulp.dest('./dist/css'));
    });

    // 打包其他资源
    gulp.task('images', function () {
        return gulp.src('./src/images/*.*')
            .pipe(imagemin({
                progressive: true,
            }))
            .pipe(gulp.dest('./dist/images'));
    });

    // 清空dist文件夹
    gulp.task('clean', function(){
        return gulp.src(['./dist/*'])
            .pipe(clean());
    });

    // 默认任务
    gulp.task('default', ['clean'], function() {
        gulp.start(['html', 'js_libs', 'js_main','css_main','images'])
    });

五、执行打包命令

    gulp

六、文件目录

七、说明

这里展示的是最基础的gulp构建功能，后续会深入解决gulp各项模块的应用，实现全方位的自动化构建。

相关文章

gulp构建项目（二）：启本地服务