Comments (3)
mi changed the gulpfile for work with scss :
/**
* A simple Gulp 4 Starter Kit for modern web development.
*
* @package @jr-cologne/create-gulp-starter-kit
* @author JR Cologne <[email protected]>
* @copyright 2018 JR Cologne
* @license https://github.com/jr-cologne/gulp-starter-kit/blob/master/LICENSE MIT
* @version v0.4.0-alpha
* @link https://github.com/jr-cologne/gulp-starter-kit GitHub Repository
* @link https://www.npmjs.com/package/@jr-cologne/create-gulp-starter-kit npm package site
*
* ________________________________________________________________________________
*
* gulpfile.js
*
* The gulp configuration file.
*
*/
const gulp = require('gulp'),
del = require('del'),
sourcemaps = require('gulp-sourcemaps'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
babel = require('gulp-babel'),
webpack = require('webpack-stream'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync').create(),
src_folder = './src/',
src_assets_folder = src_folder + 'assets/',
dist_folder = './dist/',
dist_assets_folder = dist_folder + 'assets/',
node_modules_folder = './node_modules/',
dist_node_modules_folder = dist_folder + 'node_modules/',
node_dependencies = Object.keys(require('./package.json').dependencies || {});
gulp.task('clear', () => del([ dist_folder ]));
gulp.task('html', () => {
return gulp.src([ src_folder + '**/*.html' ], { base: src_folder })
.pipe(gulp.dest(dist_folder))
.pipe(browserSync.stream());
});
gulp.task('sass', () => {
return gulp.src([ src_assets_folder + 'scss/**/*.scss' ])
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
browsers: [ 'last 3 versions', '> 0.5%' ]
}))
.pipe(cssnano())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dist_assets_folder + 'css'))
.pipe(browserSync.stream());
});
gulp.task('js', () => {
return gulp.src([ src_assets_folder + 'js/**/*.js' ])
.pipe(plumber())
.pipe(webpack({
mode: 'production'
}))
.pipe(sourcemaps.init())
.pipe(babel({
presets: [ '@babel/env' ]
}))
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dist_assets_folder + 'js'))
.pipe(browserSync.stream());
});
gulp.task('images', () => {
return gulp.src([ src_assets_folder + 'images/**/*.+(png|jpg|jpeg|gif|svg|ico)' ])
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest(dist_assets_folder + 'images'))
.pipe(browserSync.stream());
});
gulp.task('vendor', () => {
if (node_dependencies.length === 0) {
return new Promise((resolve) => {
console.log("No dependencies specified");
resolve();
});
}
return gulp.src(node_dependencies.map(dependency => node_modules_folder + dependency + '/**/*.*'), { base: node_modules_folder })
.pipe(gulp.dest(dist_node_modules_folder))
.pipe(browserSync.stream());
});
gulp.task('build', gulp.series('clear', 'html', 'sass', 'js', 'images', 'vendor'));
gulp.task('dev', gulp.series('html', 'sass', 'js'));
gulp.task('serve', () => {
return browserSync.init({
server: {
baseDir: [ 'dist' ],
port: 3000
},
open: false
});
});
gulp.task('watch', () => {
const watchImages = [
src_assets_folder + 'images/**/*.+(png|jpg|jpeg|gif|svg|ico)'
];
const watchVendor = [];
node_dependencies.forEach(dependency => {
watchVendor.push(node_modules_folder + dependency + '/**/*.*');
});
const watch = [
src_folder + '**/*.html',
src_assets_folder + 'scss/**/*.scss',
src_assets_folder + 'js/**/*.js'
];
gulp.watch(watch, gulp.series('dev')).on('change', browserSync.reload);
gulp.watch(watchImages, gulp.series('images')).on('change', browserSync.reload);
gulp.watch(watchVendor, gulp.series('vendor')).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('build', gulp.parallel('serve', 'watch')));
Also changed the sass name folder inside of src to scss, but i get this error on chrome console
Refused to apply style from 'http://localhost:3000/assets/css/pages/app.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
from gulp-starter-kit.
Hi @ivan-vilches,
you should be able to use scss by correctly modifying all the file paths as well as restarting the build script afterwards.
Since your gulpfile looks fine to me after adding code blocks around the code in your comment (there used to be some strange formatting issues), you probably forgot to restart the script.
So, make sure to stop the current process and execute npm start
after changing the gulpfile.
Please let me know whether this helped you out in order to get scss working.
If not, I would have to take a closer look at it.
I cannot promise anything, but I definitely look forward to implement out of the box support of scss in the near future.
Thank you very much for raising this issue and happy coding!
Best regards,
@jr-cologne
from gulp-starter-kit.
Hi @ivan-vilches,
I just got the time to quickly implement a temporary solution for supporting scss right out of the box.
I hope this suits your needs even better than messing around in the gulpfile.
Since this issue should actually be addressed by this, I am now going to close this issue.
In case you should still encounter any issues, feel free to reopen it.
Best regards,
@jr-cologne
from gulp-starter-kit.
Related Issues (17)
- npm init installation is not working HOT 1
- First stable version HOT 4
- Support installation in current working directory
- Do not use latest versions published on npm!
- Add support for images
- Use incremental builds for better performance
- Replace gulp-cssnano with gulp-clean-css
- Replace Autoprefixer browsers option to Browserslist config
- Installation in current directory: src folder missing, wrong installation confirmation message
- Better clarify supported node versions HOT 4
- Task Sass not watching scss partials. HOT 4
- Autoprefixer doesen't work HOT 1
- scss files not gulping on save HOT 1
- rtl direction
- Update dependencies
- Build after each change HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gulp-starter-kit.