json （Gulp 4）基本的gulpfile前端入门套件

Posted 2021-05-18

// ----- Gulp ----- //
// Compiles sass with sourcemaps, combines js, prefix-free styles, live reloads browser
// cd into your project and run 'gulp'
// compiles sass
// combines js
// prefix-free styles
// live reloads browser

var gulp = require('gulp'),

    // No more -vendor-prefixes- :)
    autoprefixer = require('gulp-autoprefixer'),
    autoprefixerOptions = {
        browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
    },

    // Combine js files into one
    concat = require('gulp-concat'),

    // Inject stylesBuild/js into browser without refreshing
    livereload = require('gulp-livereload'),

    // Rename the js file after its combined
    rename = require('gulp-rename'),

    // Sass
    sass = require('gulp-sass'),
    sassOptions = {
        errLogToConsole: true,
        outputStyle: 'expanded'
    },

    // Sourcemaps to show where lines of sass are from compiled css
    sourcemaps = require('gulp-sourcemaps'),

    // Uglify the js and save a bunch on bytez
    uglify = require('gulp-uglify'),

    // Paths & Directories
    paths = {
        js: ['./static/public/js/build/libs/*.js', './static/public/js/build/libs/*/*.js', './static/public/js/build/scripts/*.js'],
        jsBuild: './static/public/js/', // this is where the minified and concat'd project js build file will go
        styles: ['./static/public/css/*.scss', './static/public/css/partials/*.scss'], // watch these directories
        stylesBuild: './static/public/css/' // this is where the minified, compiled css will go
    };



// ----- Scripts ----- //
// Concat, Rename, Uglify
gulp.task('build-js', function() {
    gulp.src(paths.js)

    .pipe(concat('all.js'))

    .pipe(gulp.dest(paths.jsBuild))

    .pipe(rename('all.min.js'))

    .pipe(uglify())

    .on('error', logError)

    .pipe(gulp.dest(paths.jsBuild))

    .pipe(livereload({ start: true }))
});

// ----- Styles ----- //
// Compile css from sass
gulp.task('build-styles', function () {
    gulp.src(paths.styles)

    .pipe(sourcemaps.init())

    // Run Sass on those files
    .pipe(sass(sassOptions))

    // We need those sass line numbers
    .pipe(sourcemaps.write())

    .on('error', logError)

    // Autoprefixer :)
    .pipe(autoprefixer(autoprefixerOptions))

    // Write the resulting CSS in the output folder
    .pipe(gulp.dest(paths.stylesBuild))

    .pipe(livereload({ start: true }))
});


// ----- Watch Files ----- //
// Watch Files For Changes (Scripts and Styles)
gulp.task('watch', function() {
    livereload.listen()

    gulp.watch(paths.js, ['build-js'])

    gulp.watch(paths.styles, ['build-styles'])

    .on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...')
    })
});


// ----- Default Task ----- //
// Run from command line with: gulp
gulp.task('default', gulp.series('build-js', 'build-styles', 'watch'));


// ----- Errors ----- //
var logError =  function(error) {
    console.log(error.toString());
    this.emit('end');
};

{
  "name": "front-end-starter-kit",
  "version": "0.0.1",
  "description": "Front-end starter-kit: watches/combines/uglifies js/sass",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "gulpjs/gulp#4.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.5.0",
    "gulp-livereload": "^3.8.1",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "antwon",
  "license": "ISC"
}